Build a HTML5 Image Compressor Using browser-image-compression Library in Browser Using Javascript Full Project For Beginners

Build a HTML5 Image Compressor Using browser-image-compression Library in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a html5 image compressor using browser-image-compression library in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

npm i browser-image-compression

 

After installing this library you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
<body>
browser-image-compression@<span id="version">#.#.#</span>
<p>look at console to see logs</p>
Options:<br />
<label for="maxSizeMB">maxSizeMB: <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
<label for="maxWidthOrHeight">maxWidthOrHeight: <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight"
                                                       value="1024" /></label>
<hr>
<div>
    <label for="web-worker">
        Compress in web-worker <span id="web-worker-progress"></span>
        <input id="web-worker" type="file" accept="image/*" onchange="compressImage(event, true);">
    </label>
    <p id="web-worker-log"></p>
</div>
<hr>
<div>
    <label for="main-thread">
        Compress in main thread <span id="main-thread-progress"></span>
        <input id="main-thread" type="file" accept="image/*" onchange="compressImage(event, false);">
    </label>
    <p id="main-thread-log"></p>
</div>
<table>
    <tr>
        <td>input preview</td>
        <td>output preview</td>
    </tr>
    <tr>
        <td><img id="preview" /></td>
        <td><img id="preview-after-compress" /></td>
    </tr>
</table>

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    td {
        vertical-align: top;
        width: 50%;
    }

    img {
        max-width: 100%;
    }
</style>


<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.14/dist/browser-image-compression.js"></script>
<script>
  document.querySelector('#version').innerHTML = imageCompression.version
  function compressImage (event, useWebWorker) {
    var file = event.target.files[0]
    var logDom, progressDom
    if (useWebWorker) {
      logDom = document.querySelector('#web-worker-log')
      progressDom = document.querySelector('#web-worker-progress')
    } else {
      logDom = document.querySelector('#main-thread-log')
      progressDom = document.querySelector('#main-thread-progress')
    }
    document.getElementById('preview').src = URL.createObjectURL(file)

    logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
    console.log('input', file)
    imageCompression.getExifOrientation(file).then(function (o) {
      console.log('ExifOrientation', o)
    })

    var options = {
      maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
      maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
      useWebWorker: useWebWorker,
      onProgress: onProgress
    }
    imageCompression(file, options).then(function (output) {
        logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
        console.log('output', output)
        const downloadLink = URL.createObjectURL(output)
        logDom.innerHTML += ' <a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
        document.getElementById('preview-after-compress').src = downloadLink
    })

    // await uploadToServer(output)

    function onProgress (p) {
      progressDom.innerHTML = '(' + p + '%' + ')'
    }
  }

  function uploadToServer (file) {
    var formData = new FormData()
    formData.append('image', file)
    return fetch('http://localhost/image-upload-api', {
      method: 'POST',
      body: formData
    })
  }
</script>
</body>
</html>

 

See also  Deno.js Tutorial to Validate JSON Objects Schema Using simplejsonvalidator Library in Node.js & TypeScript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply