Skip to content

Instantly share code, notes, and snippets.

@alextanhongpin

alextanhongpin/compress.js

Last active October 9, 2021 16:45
Show Gist options
  • Save alextanhongpin/0f4ca5d0098a3410e0960b3ee2420bbb to your computer and use it in GitHub Desktop.
Save alextanhongpin/0f4ca5d0098a3410e0960b3ee2420bbb to your computer and use it in GitHub Desktop.
Download ZIP
Sample usage for compress.js library.
Raw
compress.js
const compress = new Compress()
const upload = document.getElementById('upload')
upload.addEventListener('change', (evt) => {
const files = [...evt.target.files]
compress.compress(files, {
size: 4, // the max size in MB, defaults to 2MB
quality: 0.75, // the quality of the image, max is 1,
maxWidth: 1920, // the max width of the output image, defaults to 1920px
maxHeight: 1920, // the max height of the output image, defaults to 1920px
resize: true, // defaults to true, set false if you do not want to resize the image width and height
rotate: true // Enables rotation, defaults to false
}).then((data) => {
// returns an array of compressed images
console.log(data)
})
}, false)
@selobu
Copy link

selobu commented Sep 26, 2017 •
edited

Hi, I'm using your code and I like to replace the input file content by the compress image but I don't know how

I was trying by using

upload.data = ${img.prefix}${img.data}

But it doesn't work.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="compress.js"></script>
    <style type="text/css">   
        body {
                font-family: Helvetica, Arial;
            }
        .container {
                max-width: 640px;
                    width: 100%;
                    margin: auto;
            }
        #preview {
            width: 100%;
            height: auto;
        }
    </style>

    <title>Image upload test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">       
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <h1>Image upload test</h1>
    <form action="" method="post"
        class="form" enctype="multipart/form-data" role="form">
        <!--<input id="csrf_token" name="csrf_token" type="hidden" value="Ijc5MTQzYWJiNTUxMjE2YThkMTY2MTAzMjdkNTUzMjQxNmQwNjE2YjUi.DKwEzg.Axe5_cYErO2AJKjMKfE70G5or9k">-->
    
        <div class="form-group "><label class="control-label" for="upload">Equipment image</label>
            <input id="upload" name="imagen" type="file">
        </div>
            <input class="btn btn-default" id="submit" name="submit" type="submit" value="Save">
    </form>
    
    <div class='container'>
        <img src="" alt="" id="preview">
        <p id="output"></p>
    </div>

    <script type="text/javascript">
    const compress = new Compress()
    const preview = document.getElementById('preview')
    const output = document.getElementById('output')
    const upload = document.getElementById('upload')
    
    upload.addEventListener('change', (evt) => {
        const files = [...evt.target.files]
        compress.compress(files, {
              size: 6, // the max size in MB, defaults to 2MB
            quality: 0.75, // the quality of the image, max is 1,
            maxWidth: 1920, // the max width of the output image, defaults to 1920px
            maxHeight: 1920, // the max height of the output image, defaults to 1920px
            resize: true // defaults to true, set false if you do not want to resize the image width and height
            }).then((images) => {
                console.log(images)
                const img = images[0]
                // returns an array of compressed images
                // $("#upload").value = `${img.prefix}${img.data}`,
                alert('File uploaded')
                upload.data = `${img.prefix}${img.data}`
                preview.src = `${img.prefix}${img.data}`
                console.log(img)
            
                const { endSizeInMb, initialSizeInMb, iterations, sizeReducedInPercent, elapsedTimeInSeconds, alt } = img
            
                output.innerHTML = `<b>Start Size:</b> ${initialSizeInMb} MB <br/><b>End Size:</b> ${endSizeInMb} MB <br/><b>Compression Cycles:</b> ${iterations} <br/><b>Size Reduced:</b> ${sizeReducedInPercent} % <br/><b>File Name:</b> ${alt}`
          })
        }, false)
    </script>
</body>
</html>

@sergiorighi
Copy link

sergiorighi commented Oct 27, 2017 •
edited

I'm having the error "v.map is not a function".

@DineshKachhot
Copy link

DineshKachhot commented Jul 6, 2021 •
edited

I am using compress.js in my react native project, I want to reduce file size of a file picked using react-native-camera,

const photo = await camera.current.takePictureAsync();

Using adding this photo as array in compress.js like this,

const files = [photo]; const compressedFiles = await compress.compress(files, { size: 4, quality: 0.75, maxWidth: 600, maxHeight: 600, resize: true, });

Getting following error while compress called,

TypeError: t.slice is not a function. (In 't.slice(0, 65536)', 't.slice' is undefined)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment