DEV Community: Jay Prakash

How to Create an Image Compressor Website using pure JavaScript

Jay Prakash — Sun, 04 Dec 2022 03:49:54 +0000

In this post, I will talk about creating a small Image Compressor website, if you prefer to watch a video on this topic rather reading this whole post, you can watch it below:

First, we will create three files index.html, style.css & main.js.
We will create style.css file inside a folder called css & main.js file inside a folder called js.

We will put following contents into index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compressor</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <h1 class="heading">Image Compressor</h1>

    <div class="main_content">
        <input type="file" id="my_image">

        <span>Original Image</span>
        <div id="original_image_container"></div>
        <span>Compressed Image</span>
        <div id="compressed_image_container"></div>
    </div>

    <!-- JS -->
    <script src="js/main.js"></script>
</body>

</html>

Now, in above code, what I'm doing is creating an input element of type file to choose an image that we will later process & compress it.
I'm also adding two container divs, one for displaying the original image & other for displaying the compressed image.

Now, we will put the following contents in css/style.css file:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
button,
input {
    font-family: 'Montserrat', sans-serif;
}

.heading {
    text-align: center;
    background-color: #00b00f;
    color: #fff;
    padding: 1rem;
}

.main_content {
    width: 1000px;
    margin: 1rem auto;
    box-shadow: 0px 3px 3px #ccc;
    padding: 1rem;
    border-top: 3px solid #00b00f;
}

input {
    display: block;
    margin: 1rem;
}

#original_image_container,
#compressed_image_container {
    border: 1px solid #ff6600;
    padding: 1rem;
    margin: 1rem;
}

#compressed_image_container {
    cursor: pointer;
}

There is nothing to explain in above code, I'm just putting some basic CSS to style our website.

Now, we will put following contents into js/main.js file:

const myImage = document.querySelector("#my_image");
const originalImageContainer = document.querySelector("#original_image_container");
const compressedImageContainer = document.querySelector("#compressed_image_container");

myImage.addEventListener("change", (evt) => {
    const image = evt.target.files[0];

    const reader = new FileReader();
    reader.onload = () => {
        const newImage = new Image();
        newImage.src = reader.result;
        newImage.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.height = newImage.height;
            canvas.width = newImage.width;
            const ctx = canvas.getContext('2d');

            newImage.width = 150;
            originalImageContainer.appendChild(newImage);

            ctx.drawImage(newImage, 0, 0);

            const newUrl = canvas.toDataURL('image/jpeg', 0.5);

            compressedImageContainer.innerHTML = `<img src="${newUrl}" width="150" onclick="downloadImage(event)">`;
        };

    };
    reader.readAsDataURL(image);
});

const downloadImage = (evt) => {
    const a = document.createElement('a');
    a.download = 'compressed_image.jpeg';
    a.href = evt.target.src;
    a.target = '_blank';
    a.click();
};

So, in above code, I'm selecting all the HTML elements that we require here using querySelector.
I'm taking input element in myImage variable & attaching "change" event listener on it, so when someone will choose image using input element, it will fire "change" event handler defined in the above code.
In the handler, I'm taking the image that user selected using the following code:

const image = evt.target.files[0];

After that, I'm creating an instance of FileReader API to read the image file as dataURL(base64 format).

const reader = new FileReader();
reader.readAsDataURL(image);

Now, when FileReader API will finish reading the image, it will fire onload event handler & give it's base64 encoded dataURL in reader.result property.
Once, we have the base64 encoded format of image file that user has selected, we can create an image element from that dataURL.
Next, we will take that image and draw a canvas out of it, the main reason for drawing a canvas out of that image is to use a method of canvas that is toDataURL that take two parameters, first one it takes mime type & second it takes the quality of the image.
The lowest quality value is 0 and highest quality value is 1, so we will take its middle value to take the medium quality so that it will compress it and size will be less from original image.
In the following code, we can see that we are getting new dataURL of compressed image.

const newUrl = canvas.toDataURL('image/jpeg', 0.5);

Now, using the dataURL of compressed image, we can display this on our website and also add a functionality to download this compressed image which size will be less from original image.

You can find the whole code on github here

Please note, the code given in this post can be further optimized to suit our needs, I just tried to show how to create core functionality of an Image Compressor just using pure JavaScript.

Ever wondered 🤔 how data binding works in modern UI frameworks & libraries ?

Jay Prakash — Mon, 21 Nov 2022 03:34:21 +0000

We can implement our own data binder which will sync view with model and vice versa. With the release of ES6 Proxy object, it's now more simpler to implement our own data binding functionality.

Before implementing our own, let's have a brief introduction of Proxy object.

Proxy object gives us the functionality to wrap an original object & then we can access the properties of original object through that Proxy object.

The advantage of using Proxy object is that we can easily attach a handler to the Proxy object so that we can intercept in between if someone tries to access that Proxy object because control will go to handler first before going to original object. Let's see in below example, how it works:

const originalObj = {
    firstName: "Jay",
    lastName: "Prakash"
};
const handler = {
    set: (target, property, value) => {
        if (value.length > 2) {
            target[property] = value;
        } else {
            alert("First Name should be more than 2 characters !");
        }
        return true;
    },
};
const proxyObj = new Proxy(originalObj, handler);
proxyObj.firstName = 'Jo';

In above code snippet, what I'm doing is simply defining an object called originalObject.

Then, I'm defining another object called handler that contains a trap called set. We call this trap because this is what it's doing, it is trapping or intercepting the call to original object.

The set trap will get called when someone tries to set/update the property of originalObject, in our case, whenever we try to update the firstName property with value of length 2, it will give an alert message because in our set trap we are checking if value that we intend to set has length greater than 2 otherwise we are triggering an alert and simply returning from set trap.

Please note, there are many traps for Proxy object, here we are only using set trap, for a full list of traps, refer here.

Now, we know that how JavaScript Proxy object works, so let's start implementing our own two-way data binder with the help of JS proxies.

So, to bind data between model and view, we need to define some nomenclature. We will use HTML5 data attribute to accomplish this task. Let's say we define data-model attribute for defining model and data-bind attribute for defining on which HTML elements, the respective data will be binded. One thing to note here is that values of these data attributes will act like keys to recognize which element has to be updated when it's binded model changes it's state. Let's see in below example what I'm talking about:

<input type="text" data-model="input_1" />
<div data-bind="input_1"></div>

In above example, you can see that I have given two attributes data-model & data-bind and values of both attributes are same that means INPUT element will bind to DIV element, so what we will do is whenever value of INPUT element containing data-model changes, we will update the respective element with data-bind attribute matching the same key, in our case, it is input_1.

Let's create a method to update view.

 // Update view when current state of object changes
 const updateView = (obj, prop) => {
     // Get all elements which is binded to the obj prop that got changed
     const elements = document.querySelectorAll(`[data-bind=${prop}]`);

     // Loop through all elements & sync view with the model
     elements.forEach(element => {
         const nodeType = element.nodeName;
         if (nodeType === 'INPUT') {
             element.value = obj[prop];
         } else {
             element.textContent = obj[prop];
         }
     });
 };

In above code, we defined one method called updateView that is receiving two prameters: targetObject & the property that needs update. What we are doing is we are getting all elements of HTML page that contains data-bind attribute with the same key that we are receiving as second parameter. Then, we are looping through all such elements that needs an update and we update the value based on the key that we received as second parameter in this method.

Now, let's write some code to initialize a model and attach handlers to it.

// Define a object to hold the state
const obj = {}; // can be referred as a model to hold all data

// Get all elements which value needs to be updated back to model
const models = document.querySelectorAll('[data-model]');
models.forEach(model => {
    const attributeValue = model.getAttribute('data-model');
    obj[attributeValue] = '';
    // Add event listener on view elements for syncing back to model
    model.addEventListener('input', (evt) => {
        jsBinder[evt.target.dataset.model] = evt.target.value;
    });
});

// Create a proxy & attach handler to it
return new Proxy(obj, {
    set: (target, property, value) => {
        target[property] = value;
        // Sync View With Model
        updateView(target, property);
        return true;
    },
});

Now, what we are doing is we are defining a variable called obj that will act as a model that will hold all model related data based on key.

Then, we are getting all elements from HTML page containing data-model attribute & attaching input event listener to each of those elements and in that listener what we are doing is we are trying to set property through Proxy object based on the key that we are getting from evt.target.dataset.model which in turn will invoke the set trap that is defined inside Proxy object. Now, in set trap, what we are doing is simply setting/updating the property based on whether it is new/old property and finally we are calling the updateView method that we created earlier to update the view.

Hence, in input event listener, we are syncing our model from view whenever our view changes and in set trap we are syncing back the view from model by calling updateView method if someone changes the model itself either programmatically or via some external source.

Huh, that was a lot of code, aggregating all lines of code above, let's see the following code that is whole implementation of our own binder. You can also find whole implementation in this GitHub repository.

// Initialize the model that will hold the object state
const jsBinder = (() => {

    // Update view when current state of object changes
    const updateView = (obj, prop) => {
        // Get all elements which is binded to the obj prop that got changed
        const elements = document.querySelectorAll(`[data-bind=${prop}]`);
        // Loop through all elements & sync view with the model
        elements.forEach(element => {
            const nodeType = element.nodeName;
            if (nodeType === 'INPUT') {
                element.value = obj[prop];
            } else {
                element.textContent = obj[prop];
            }
        });
    };

    // Define a object to hold the state
    const obj = {};

    // Get all elements which value needs to be updated back to model
    const models = document.querySelectorAll('[data-model]');
    models.forEach(model => {
        const attributeValue = model.getAttribute('data-model');
        obj[attributeValue] = '';
        // Add event listener on view elements for syncing back to model
        model.addEventListener('input', (evt) => {
            jsBinder[evt.target.dataset.model] = evt.target.value;
        });
    });

    // Create a proxy & attach handler to it
    return new Proxy(obj, {
        set: (target, property, value) => {
            target[property] = value;

            // Sync View With Model
            updateView(target, property);
            return true;
        },
    });
})();

Final note, please share with your friends if this looks interesting to you, found any mistake, have some suggestions, questions etc, please post a comment I will try my best to answer it.

You can also find this same article published on linkedin here.

Thanks for reading & have a good day ahead.