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




<!DOCTYPE html>
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>
    <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);">
    <p id="web-worker-log"></p>
    <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);">
    <p id="main-thread-log"></p>
        <td>input preview</td>
        <td>output preview</td>
        <td><img id="preview" /></td>
        <td><img id="preview-after-compress" /></td>

    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;

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

    img {
        max-width: 100%;

<script src=""></script>
<script type="text/javascript" src=""></script>
  document.querySelector('#version').innerHTML = imageCompression.version
  function compressImage (event, useWebWorker) {
    var file =[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="' + + '">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


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