{"success":true,"post":{"id":"37","author_id":"1","title":"How to code a Photo Filter App with Javascript","meta_title":"How to code a Photo Filter App with Javascript","meta_description":"Learn to use the HTML canvas element in conjunction with JavaScript to upload photos, create and apply apply filters, and download the edited image.","slug":"how_to_code_a_javascript_photo_filter_app","summary":"Learn to use the HTML canvas element in conjunction with JavaScript to upload photos, create and apply apply filters, and download the edited image.","publishedOn":"2022-12-31 16:01:51","updatedOn":"2023-01-01 17:09:00","content":"<p>\n    In today's tutorial, you will learn how to build a Photo Filter App with JavaScript. \n    It requires minimal code, yet doesn't rely on any third-party libraries. \n    Some of the key aspects we will cover include interacting with the HTML canvas element, \n    using the FileReader object to read images, and creating your own algorithms for editing pictures. \n<\/p>\n\n<section id=\"table_of_contents\">\n    <h2> Table of contents<\/h2>\n    <ol>\n        <li>\n            <a href=\"#final\">How the final project will look like<\/a>\n        <\/li>\n        <li>\n            <a href=\"#html\">Adding the HTML<\/a>\n        <\/li>\n        <li>\n            <a href=\"#js1\">Using JavaScript to paint the uploaded photo to the canvas<\/a>\n            <ol>\n                <li>\n                    <a href=\"#js1-1\">Accessing the required DOM elements<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js1-2\">Creating an image from the content of the uploaded file<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js1-3\">\n                        FileReader: Reading the contents of the uploaded image\n                    <\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js1-4\">\n                        Listening for file uploads\n                    <\/a>\n                <\/li>\n            <\/ol>\n        <\/li>\n        <li>\n            <a href=\"#js2\">Creating Image Filters with JavaScript<\/a>\n            <ol>\n                <li>\n                    <a href=\"#js2-1\">The Grayscale Filter<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js2-2\">The Monotone Filter<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js2-3\">The Duotone Filter<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js2-4\">Refactoring<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js2-5\">Adding reset functionality & error handling<\/a>\n                <\/li>\n                <li>\n                    <a href=\"#js2-6\">Allowing users to download the image<\/a>\n                <\/li>\n            <\/ol>\n        <\/li>\n    <\/ol>\n<\/section>\n\n<section>\n    <h2 id=\"final\">\n        How the final project will look like\n    <\/h2>\n\n    <p>\n        Below, you will find the finished \n        <a href=\"https:\/\/codepen.io\/patriciamolnar\/full\/ExLgoZL\" target=\"_blank\">JavaScript Filter App<\/a>. \n        You can upload photos from your computer, \n        apply a filter to it and then download the edited result.\n    <\/p>\n\n    <iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"JavaScript Photo Filter App \" src=\"https:\/\/codepen.io\/patriciamolnar\/embed\/ExLgoZL?default-tab=\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n        See the Pen <a href=\"https:\/\/codepen.io\/patriciamolnar\/pen\/ExLgoZL\">\n        JavaScript Photo Filter App <\/a> by Patricia Molnar (<a href=\"https:\/\/codepen.io\/patriciamolnar\">@patriciamolnar<\/a>)\n        on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n    <\/iframe>\n<\/section>\n\n<section>\n    <h2 id=\"html\">Adding the HTML<\/h2>\n\n    <pre>\n    <code class=\"lang-markup\">\n    &lt;!DOCTYPE html>\n    &lt;html lang=\"en\">\n    &lt;head>\n        &lt;meta charset=\"UTF-8\">\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        &lt;title>filter photo app | pmCoding tutorias&lt;\/title>\n        &lt;link rel=\"stylesheet\" href=\"style.css\">\n        &lt;script defer src=\"script.js\">&lt;\/script>\n    &lt;\/head>\n    &lt;body>\n    &lt;\/body>\n    &lt;\/html>\n    <\/code>\n    <\/pre>\n\n    <p>\n        As with every project, we've got to add the <code class=\"lang-markup\">&lt;head><\/code> and\n        <code class=\"lang-markup\">&lt;body><\/code> tags. \n        I let you decide which meta tags to include based on your requirements.\n    <\/p>\n\n    <p>\n        Make sure to link the CSS and the JavaScript files. As you can see from the code, \n        I have added the <code class=\"lang-js\">defer<\/code> attribute to the JavaScript tag. \n        This is important as the <code class=\"lang-js\">defer<\/code> attribute ensures that our JavaScript only executes when the HTML has finished loading and the DOM is ready. \n        If you omit this, you will probably encounter some JavaScript errors, \n        as JavaScript will try to access DOM elements that have not yet been created.\n    <\/p>\n\n    <p>Let's now add the markup that is necessary for the filter app:<\/p>\n\n    <pre>\n    <code class=\"lang-markup\">\n    &lt;main>\n        &lt;h1>\n            Apply filters to your images\n        &lt;\/h1>\n\n        &lt;form>\n            &lt;label for=\"image\" class=\"sr-only\">Upload an image&lt;\/label>\n            &lt;input type=\"file\" accept=\"image\/png, image\/jpg, image\/jpeg\" name=\"image\" id=\"image\">\n        &lt;\/form>\n\n        &lt;div class=\"container\">\n            &lt;canvas>&lt;\/canvas>\n\n            &lt;div class=\"buttons\">\n                &lt;div class=\"filters\">\n                    &lt;button id=\"grayscale\">Grayscale&lt;\/button>\n                    &lt;button id=\"monotone\">Blue Monoton&lt;\/button>\n                    &lt;button id=\"duotone\">Orange Blue&lt;\/button>\n                &lt;\/div>\n\n                &lt;div class=\"actions\">\n                    &lt;button id=\"reset\">Reset&lt;\/button>\n                    &lt;a id=\"download\" download>\n                        &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"20px\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n                            &lt;path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3\" \/>\n                        &lt;\/svg>\n    \n                        &lt;span>Download&lt;\/span>\n                    &lt;\/a>\n                &lt;\/div>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/main>\n    <\/code>\n    <\/pre>\n\n    <p>\n        Noteworthy things in this markup:\n    <\/p>\n\n    <pre>\n    <code class=\"lang-html\">\n    &lt;input type=\"file\" accept=\"image\/png, image\/jpg, image\/jpeg\" name=\"image\" id=\"image\">\n    <\/code>\n    <\/pre>\n\n    <p>\n        As we want the user to be able to upload photos, we can add an input field of type file. \n        This will create an interface such as this: \n    <\/p>\n\n    <p>\n        <input type=\"file\" accept=\"image\/png, image\/jpg, image\/jpeg\">\n    <\/p>\n\n    <pre>\n    <code class=\"lang-html\">\n    &lt;canvas>&lt;\/canvas>\n    <\/code>\n    <\/pre>\n    <p>\n        The canvas will allow us to paint the uploaded photos to the screen, \n        get the data of each pixel, and then manipulate them to achieve the desired filter effect. \n    <\/p>\n\n    <p>\n        The <code class=\"lang-html\">&lt;div class=\"filters\">&lt;\/div><\/code> holds\n        all the buttons that apply the different filters to the images. \n\n        The link and the button within <code class=\"lang-html\">&lt;div class=\"actions\">&lt;\/div><\/code>\n        will allow the user to remove the applied filter from the image, and to download the edited photo.\n    <\/p>\n\n    <p>\n        As you can see the <code class=\"lang-html\">&lt;a id=\"download\" download><\/code> has a\n        <code class=\"lang-html\">download<\/code> attribute. \n        This is necessary if we want to allow users to download their edits.<br \/>\n        \n        It however, does not have an <code class=\"lang-html\">href<\/code> attribute. \n        We are going to add that with JavaScript.\n    <\/p>\n<\/section>\n\n<section>\n    <h2 id=\"js1\">\n        Using JavaScript to paint the uploaded photo to the\n        <code class=\"lang-html\">&lt;canvas><\/code>\n    <\/h2>\n\n    <h3 id=\"js1-1\">\n        Accessing the required DOM elements\n    <\/h3>\n\n    <p>\n        In the script.js file, the first thing we need to do is to access the DOM elements we want to interact with. \n        These include the canvas, the buttons and the input element. \n    <\/p>\n\n    <pre>\n    <code class=\"lang-js\">\n    const canvas = document.querySelector('canvas'); \n    const context = canvas.getContext('2d'); \n    \n    const grayscale = document.getElementById('grayscale'); \n    const monotone = document.getElementById('monotone'); \n    const duotone = document.getElementById('duotone'); \n    const reset = document.getElementById('reset'); \n    const download = document.getElementById('download');\n    const input = document.getElementById('image');\n\n    let imageWidth = null; \n    let imageHeight = null; \n    let originalData = null; \n    <\/code>\n    <\/pre>\n    \n    <p>\n        I am selecting the canvas element with <code class=\"lang-js\">document.querySelector<\/code>, \n        which will return the first canvas element on the page. \n        We only have one, so it's ideal in this case. \n    <\/p>\n        \n    <p>\n        To be able to interact with and draw to the canvas, we need to get its context. \n        This we can do with <code class=\"lang-js\">canvas.getContext('2d')<\/code>. \n        You can find out more about this reading the MDN web docs' article on \n        <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/getContext\" target=\"_blank\">\n            HTMLCanvasElement.getContext()<\/a>.\n    <\/p>\n\n    <p>\n        To select the different buttons and the input field, I am using\n        <code class=\"lang-js\">document.getElementById()<\/code> with their individual IDs as an argument.\n    <\/p>\n\n    <p>\n        Finally, I am adding variables with the name \n        <code class=\"lang-js\">imageWidth<\/code>, \n        <code class=\"lang-js\">imageHeight<\/code> and \n        <code class=\"lang-js\">originalData<\/code>. \n        \n        These will hold information required by several of our functions, so I want to add it to the global scope. \n        The information they hold will change, so I am using the <code class=\"lang-js\">let<\/code> keyword instead of\n        <code class=\"lang-js\">const<\/code>, so I can reassign their values.\n    <\/p>\n\n    <p>\n        To display the uploaded image on the page, we need to do the following: \n    <\/p>\n\n    <ul>\n        <li>Keep watching for file uploads<\/li>\n        <li>Read the data from the uploaded photo<\/li>\n        <li>Create an image element with the data we have read from the file<\/li>\n        <li>Paint the image onto the canvas<\/li>\n    <\/ul>\n\n    <p>\n        For this, we need 3 event listeners. \n    <\/p>\n\n    <p>\n        Let's begin by creating the image that will get drawn on the canvas first. \n    <\/p>\n\n    <h3 id=\"js1-2\">\n        Creating an image from the content of the uploaded file \n    <\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const image = new Image(); \n    image.addEventListener('load', () => {\n        imageWidth = image.width; \n        imageHeight = image.height; \n        canvas.width = imageWidth; \n        canvas.height = imageHeight; \n        context.drawImage(image, 0, 0); \n    });\n    <\/code>\n    <\/pre>\n\n    <p>\n        I am defining a variable called <code class=\"lang-js\">const image<\/code> \n        and am setting it equal to <code class=\"lang-js\">new Image()<\/code>. \n        This will create an image element for us and is the same as \n        <code class=\"lang-js\">document.createElement('img')<\/code>. \n    <\/p>\n\n    <p>\n        Next, I am adding an event listener to the image. \n        The event we are listening for is called <code class=\"lang-js\">'load'<\/code> \n        and will fire when the image element has been fully loaded. \n        In the event listener's callback, I am setting the global variable\n        <code class=\"lang-js\">imageWidth<\/code> and <code class=\"lang-js\">imageHeight<\/code> equal to the image's width and height. \n        Then, I am also setting the canvas' width and height equal to these values. This will ensure that the canvas stays the same width. \n    <\/p>\n\n    <p>\n        Finally, I am drawing the image to the context of the canvas with the function <code class=\"lang-js\">drawImage()<\/code>.\n        Here, you need to pass 3 arguments: \n    <\/p>\n\n    <ol>\n        <li>the image<\/li>\n        <li>x-coordinate<\/li>\n        <li>y-coordinate<\/li>\n    <\/ol>\n\n    <p>\n        The coordinates indicate the position from which the image should be drawn. \n        In this case, I want it to start in the top left corner of the canvas, so I am setting the coordinates to 0 and 0. \n    <\/p>\n\n    <h3 id=\"js1-3\">\n        <code class=\"lang-js\">FileReader<\/code>: Reading the contents of the uploaded image\n    <\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const reader = new FileReader(); \n    reader.addEventListener('load', () => {\n        image.src = reader.result; \n        originalData = reader.result;\n    }); \n    <\/code>\n    <\/pre>\n\n    <p>\n        To be able to read the uploaded photo's content I need to use JavaScript's <code class=\"lang-js\">FileReader<\/code>. \n        I am defining a variable called <code class=\"lang-js\">const reader<\/code> \n        and I am using the FileReader constructor to create a new instance. \n    <\/p>\n\n    <p>\n        Here again, I need to attach an event listener.\n        In this case we again listen for the <code class=\"lang-js\">'load'<\/code> event, \n        which fires when the FileReader successfully completes reading the file. \n    <\/p>\n\n    <p>\n        There are other events you can also listen for, e.g. <code class=\"lang-js\">'error'<\/code>, \n        which fires when the file cannot be read. To find out more about the different events, read the MDN web docs's \n        <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FileReader\" target=\"_blank\">FileReader<\/a> entry. \n    <\/p>\n\n    <p>\n        In the callback of the event listener, I am setting the source of our image, which we previously created, \n        equal to the result property of the reader object. \n        I am also assigning <code class=\"lang-js\">reader.result<\/code> to the <code class=\"lang-js\">originalData<\/code> variable \n        we defined in the global scope. \n        \n        I want to always keep an unedited version of the uploaded image in this variable, \n        so when the user clicks the reset button, we can set the content of the canvas equal to the data stored in \n        <code class=\"lang-js\">originalData<\/code>. \n    <\/p>\n\n    <h3 id=\"js1-4\">Listening for file uploads<\/h3>\n\n    <p>\n        Finally, I am adding an event listener to our input field. \n        The event we are going to listen for is <code class=\"lang-js\">'change'<\/code>, \n        and will fire anytime the user uploads a new image. \n        The callback will make use of the <code class=\"lang-js\">reader.readAsDataUrl<\/code> function,\n        which receives the uploaded image as its argument. \n        The <code class=\"lang-js\">readAsDataUrl<\/code> will then start reading the contents of the image. \n    <\/p>\n\n    <p>\n        So basically, whenever a user uploads an image, first the input event listener will get triggered, \n        which starts reading the file's content. \n        Once this is complete, the next event listener, attached to the reader variable, is fired. \n        This sets the image's src variable. \n        Finally, once that has finished executing our image event listener gets called and we end up with the image displayed on screen. \n        One event listener is invoking the other. \n    <\/p>\n\n    <p>With this in place, we have all the code required to display the image on the canvas.<\/p>\n\n    <p>Next we'll add the filters.<\/p>\n\n    <h2 id=\"js2\">\n        Creating Image Filters with JavaScript\n    <\/h2>\n\n    <h3 id=\"js2-1\">\n        The Grayscale Filter\n    <\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const applyGrayscale = () => {\n        const image = context.getImageData(0, 0, imageWidth, imageHeight);\n        const imgData = image.data; \n        \n        for(let i = 0; i &lt; imgData.length; i += 4) {\n            const red = imgData[i]; \n            const green = imgData[i + 1]; \n            const blue = imgData[i + 2]; \n            \n            const grayValue = (red + green + blue) \/ 3;\n            imgData[i] = grayValue;\n            imgData[i + 1] = grayValue;\n            imgData[i + 2] = grayValue;\n        }\n    \n        context.putImageData(image, 0, 0); \n    }\n    <\/code>\n    <\/pre>\n\n    <p>\n        I will start of by creating the functionality for the grayscale image. \n        For this, I am defining a function called <code class=\"lang-js\">applyGrayscale()<\/code>.\n        Within the function I'm using <code class=\"lang-js\">context.getImageData(0, 0, imageWidth, imageHeight)<\/code>, \n        which returns the pixel data for the context of the canvas. \n    <\/p>\n\n    <p>\n        <code class=\"lang-js\">context.getImageData()<\/code> takes 4 arguments: \n    <\/p>\n\n    <ol>\n        <li>x-coordinate of starting point<\/li>\n        <li>y-coordinate of starting point<\/li>\n        <li>x-coordinate of end point<\/li>\n        <li>y-coordinate of end point<\/li>\n    <\/ol>\n\n    <p>\n        These define which area of the image should be read. As I want to get data for the whole image, \n        I am setting the starting point to be the top left corner (0, 0) and the end point to be the bottom right corner. \n        The <code class=\"lang-js\">imageWidth<\/code> and <code class=\"lang-js\">imageHeight<\/code> indicate the position of the last pixel,\n        so we can use these to determine the end point. \n    <\/p>\n\n    <p>\n        The variable <code class=\"lang-js\">const image<\/code> now holds all the information of the image that you need. \n        I recommend you <code class=\"lang-js\">condole.log(image)<\/code>, so you can see what data it holds. \n    <\/p>\n\n    <p>\n        You should get the following object logged to the console: \n    <\/p>\n\n    <img src=\"\/assets\/img\/T25\/image_data.jpg\" alt=\"An image showing the object structure from calling the JavaScript function getImageData()\">\n\n    <p>\n        The property we really care about is <code class=\"lang-js\">data<\/code>. It holds the RGBA information of each pixel. \n        (Read more about RGB values here: \n        <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_rgb.asp\" target=\"_blank\">RGB colours<\/a>)\n    <\/p>\n\n    <p>\n        Expanding it you can see it comprises a long list of integers. \n        I made a diagram, which will hopefully help illustrate how the data is structured: \n    <\/p>\n\n    <img src=\"\/assets\/img\/T25\/image_data_explained.jpg\" alt=\"An image explaining of how the pixels' colour data is structured within object\">\n\n    <p>\n        By mixing red, green and blue, we get the colour of the pixel. The fourth tells us the alpha value (opacity). \n    <\/p>\n\n    <p>\n        We can loop through the array of these numbers and use these RGBA values to manipulate the look of the image. \n    <\/p>\n\n    <p>\n        As we only care about the data property of the object, I am saving it to the variable <code class=\"lang-js\">imgData<\/code>.\n    <\/p>\n\n    <p>\n        Then I am adding a <code class=\"lang-js\">for<\/code> loop. The iterator <code class=\"lang-js\">i<\/code> will start at 0, so the very first array element. \n        The loop should keep on going until the end of the array. \n        Whenever one of the iterations finishes, I want to increment <code class=\"lang-js\">i<\/code> by 4. \n        The reason for this is that each pixel is represented by 4 values within the array as you could see on the diagram. \n    <\/p>\n\n    <p>\n        Within the loop, I am saving each colour value into its own variable. \n        Red will be the first value within the iteration. Green, we can get by adding 1 to <code class=\"lang-js\">i<\/code>, blue by adding 2. \n        You can also access alpha by adding 3, but we don't need alpha for this project. \n    <\/p>\n\n    <p>\n        Gray shades are made up of equal values of each colour. \n        So, to turn an image into a grayscale image, all we need to do is add the red, \n        green and blue values together and divide it by 3 to get their average. \n    <\/p>\n\n    <p>\n        Once we have the gray value for the pixel we are iterating over, \n        we can edit its colour by assigning the result back to the red, \n        green and blue array elements. \n        We can use the same indexes for this as we used to initially get the colour values. \n    <\/p>\n\n    <p>\n        Finally, we need to draw the edited image onto the canvas.\n        We can do this with <code class=\"lang-js\">context.putImageData(image, 0, 0);<\/code> \n        and passing the same arguments we did to drawImage in the image event listener at the beginning. \n    <\/p>\n\n    <p>\n        To test it, ensure you attach an event listener to the button with the ID <code class=\"lang-markup\">grayscale<\/code>: \n\n        <code class=\"lang-js\">\n            grayscale.addEventListener('click', applyGrayscale);\n        <\/code>\n    <\/p>\n\n    <h3 id=\"js2-2\">The Monotone Filter<\/h3>\n    \n    <pre>\n    <code class=\"lang-js\">\n    const applyMonotone = () => {\n        const image = context.getImageData(0, 0, imageWidth, imageHeight);\n        const imgData = image.data; \n        \n        for(let i = 0; i &lt; imgData.length; i += 4) {\n            const red = imgData[i]; \n            const green = imgData[i + 1]; \n            const blue = imgData[i + 2]; \n            \n            const grayValue = (red + green + blue) \/ 3;\n            imgData[i] = grayValue - 40;\n            imgData[i + 1] = grayValue - 40;\n            imgData[i + 2] = grayValue + 80;\n        }\n    \n        context.putImageData(image, 0, 0); \n    }\n    <\/code>\n    <\/pre>\n\n    <p>\n        As you can see the functionality for creating the monotone effect is very similar to the grayscale one. \n        The only difference is in the values that get assigned back to the image. \n        (We will refactor the code towards the end of the tutorial so there's no unnecessary repetition).\n    <\/p>\n\n    <p>\n        To make one colour dominant, you just need to increase its value. \n        For example, in this case, we are making blue the dominant colour, \n        so I'm increasing it by 80, and reducing red and green by 40.\n    <\/p>\n\n    <p>\n        Reducing the value of the other colours has the benefit that the brightness of the image remains the same. \n        The higher the value of each colour, the brighter the image. \n    <\/p>\n\n    <p>\n        To make green dominant, you could assign <code class=\"lang-js\">grayValue + 80<\/code> to it and reduce the other ones by 40. \n        To make magenta dominant, you could increase the values of both red and blue by 40, while decreasing green by 80. \n        I recommend experimenting around and see what you can come up with. \n    <\/p>\n\n    <p>\n        Again, make sure to attach an event listener to the appropriate button: <br \/>\n        <code class=\"lang-js\">\n            monotone.addEventListener('click', applyMonotone);\n        <\/code>\n    <\/p>\n\n    <h3 id=\"js2-3\">The Duotone Filter<\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const applyDuotone = () => {\n        const image = context.getImageData(0, 0, imageWidth, imageHeight);\n        const imgData = image.data; \n        \n        for(let i = 0; i &lt; imgData.length; i += 4) {\n            const red = imgData[i]; \n            const green = imgData[i + 1]; \n            const blue = imgData[i + 2]; \n            \n            const grayValue = (red + green + blue) \/ 3;\n            const diff = Math.round((128\/100) * grayValue); \n            imgData[i] = grayValue + diff;\n            imgData[i + 1] = grayValue;\n            imgData[i + 2] = 255 - diff;\n        }\n    \n        context.putImageData(image, 0, 0); \n    }\n\n    duotone.addEventListener('click', applyDuotone);\n    <\/code>\n    <\/pre>\n\n    <p>\n        To create the duotone effect, I came up with the algorithm myself after experimenting around for ~2 hours. \n        If you search the internet, you might find better implementations, \n        so I recommend looking around. Or you could also come up with your own algorithm. \ud83e\udd13\n    <\/p>\n\n    <p>\n        I will try to explain the logic behind it as much as possible though:\n    <\/p>\n    \n    <p>\n        Whenever we calculate the gray value by getting the average of red, green and blue, we get a value between 0 and 255. \n        0 is the colour black, 255 is white, and anything in between is a different shade of gray. \n        The higher the value the lighter the gray.\n    <\/p>\n\n    <p>\n        The middle point between 0 and 255 is 128. \n        To apply a duotone, I want to check how far away the grayValue is from this point. \n        For this, I can use percentage. \n    <\/p>\n\n    <p>\n        As 128 is the reference point from which I want to calculate the difference, \n        128 becomes the 100% mark. \n        Then with the formula 128 divided by 100 and multiplied by the grayValue, \n        I can figure out how much percent grayValue is of 128: \n    <\/p>\n\n    <p>\n        <code class=\"lang-js\">const diff = Math.round((128\/100) * grayValue)<\/code>. \n    <\/p>\n\n    <p>\n        Often, percentage calculations return decimal numbers. \n        That's why I'm using <code class=\"lang-js\">Math.random()<\/code> to round the number up or down.\n    <\/p>\n\n    <p>\n        For the red value, I am setting <code class=\"lang-js\">grayValue + diff<\/code>. \n        Green will be set to the regular <code class=\"lang-js\">grayValue<\/code> without any alterations. \n        And blue will become <code class=\"lang-js\">255 - diff<\/code>. \n        (You can also make the filter have more of a magenta hue by setting blue to simply be 255). \n    <\/p>\n\n    <h3 id=\"js2-4\">Refactoring<\/h3>\n\n    <p>\n        The time has come to remove code duplication.\n        I'm combining all the common code into a new function called \n        <code class=\"lang-js\">applyFilter<\/code>. \n        Additionally, I am also adding a <code class=\"lang-js\">filters<\/code> object, \n        which holds 3 methods. These will generate an array of values that represent the RGB colours. \n    <\/p>\n\n    <pre>\n    <code class=\"lang-js\">\n    const applyFilter = (filterType) => {\n        const image = context.getImageData(0, 0, imageWidth, imageHeight);\n        const imgData = image.data; \n        \n        for(let i = 0; i &lt; imgData.length; i += 4) {\n            const red = imgData[i]; \n            const green = imgData[i + 1]; \n            const blue = imgData[i + 2]; \n            \n            const grayValue = (red + green + blue) \/ 3;\n            const data = filters[filterType](grayValue);\n            imgData[i] = data[0];\n            imgData[i + 1] = data[1];\n            imgData[i + 2] = data[2];\n        }\n    \n        context.putImageData(image, 0, 0);  \n    }\n\n    const filters = {\n        applyGrayscale: (gray) => {\n            return [gray, gray, gray];\n        }, \n        applyMonotone: (gray) => {\n            return [gray - 40, gray - 40, gray + 80];\n        },\n        applyDuotone: (gray) => {\n            const diff = Math.round((128\/100) * gray); \n            return [gray + diff, gray, 255 - diff];\n        },\n    }\n    <\/code>\n    <\/pre>\n\n    <p>\n        The major changes to note are: \n    <\/p>\n\n    <p>\n        The <code class=\"lang-js\">applyFilter<\/code> function takes one argument: \n        <code class=\"lang-js\">filterType<\/code>. \n        The <code class=\"lang-js\">filterType<\/code> defines which filter should be applied \n        and can have the value <code class=\"lang-js\">applyGrayscale<\/code>, \n        <code class=\"lang-js\">applyMonotone<\/code> or \n        <code class=\"lang-js\">applyDuotone<\/code>.\n    <\/p>\n\n    <p>\n        Based on what string is passed as <code class=\"lang-js\">filterType<\/code>, \n        we dynamically invoke the method with the same name from the <code class=\"lang-js\">filters<\/code>object\n            and pass <code class=\"lang-js\">grayValue<\/code> to it: \n    <\/p>\n\n    <code class=\"lang-js\">\n        const data = filters[filterType](grayValue);\n    <\/code>\n\n    <p>\n        The methods within <code class=\"lang-js\">filters<\/code> then calculate the \n        RGB values and return them as an array. These values can then be assign back to the image within \n        the <code class=\"lang-js\">applyFilter<\/code> function: \n    <\/p>\n\n    <pre>\n    <code class=\"lang-js\">\n    imgData[i] = data[0];\n    imgData[i + 1] = data[1];\n    imgData[i + 2] = data[2];\n    <\/code>\n    <\/pre>\n\n    <p>\n        Finally, we also need to update the click event handlers:\n    <\/p>\n\n    <p><pre>\n    <code class=\"lang-js\">\n    grayscale.addEventListener('click', () => applyFilter('applyGrayscale'));\n    monotone.addEventListener('click', () => applyFilter('applyMonotone'));\n    duotone.addEventListener('click', () => applyFilter('applyDuotone'));\n    <\/code>\n    <\/pre><\/p>\n\n    <h3 id=\"js2-5\">Adding the reset functionality & error handling<\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const resetFilter = () => {\n        if(!image || !context || !originalData) {\n            return alert('There is nothing to reset'); \n        }\n    \n        image.src = originalData; \n        context.drawImage(image, 0, 0); \n    }\n\n    reset.addEventListener('click', resetFilter);\n    <\/code>\n    <\/pre>\n\n    <p>\n        The above code resets the image to its original state. \n        First, I want to check if there is an <code class=\"lang\">image<\/code>, \n        whether we have the <code class=\"lang-js\">context<\/code> of the canvas \n        and whether the <code class=\"lang-js\">originalData<\/code> is saved. \n        If not, resetting won't work because no filter has been applied or image uploaded. \n        And so, I want to inform the user of this by returning an alert prompt with the error message.\n    <\/p>\n\n    <p>\n        If we do have all of these, we go ahead and assign \n        <code class=\"lang-js\">originalData<\/code> to the \n        <code class=\"lang-js\">image.src<\/code> property. \n        Then we draw the image to the context of the canvas again. \n    <\/p>\n\n    <p>\n        Let's also add some error handling to the \n        <code class=\"lang-js\">applyFilters<\/code> function:\n    <\/p>\n\n    <pre>\n    <code class=\"lang-js\">\n    const applyFilter = (filterType) => {\n        if(!imageWidth || !imageHeight) {\n            return alert(\"Please upload an image first!\");\n        }\n    \n        \/\/rest of the code comes here...\n    }\n    <\/code>\n    <\/pre>\n\n    <p>\n        If there is no image uploaded and we try to apply a filter, we get an error. \n        So to avoid that, let's add an if statement, which checks whether <code class=\"lang-js\">imageWidth<\/code> \n        or <code class=\"lang-js\">imageHeight<\/code> is missing. \n        If one of them is, we return an alert asking the user to upload an image first.\n    <\/p>\n\n    <h3 id=\"js2-6\">\n        Allowing users to download the image\n    <\/h3>\n\n    <pre>\n    <code class=\"lang-js\">\n    const applyFilter = (filterType) => {\n        \/\/ previously added code goes here\n        download.href = canvas.toDataURL(); \n    }\n    <\/code>\n    <\/pre>\n\n    <p>\n        The last thing we need to add is the download functionality. \n        At the end of the <code class=\"lang-js\">applyFilters<\/code> function, \n        I am setting the <code class=\"lang-js\">href<\/code> attribute of the download button equal to \n        <code class=\"lang-js\">canvas.toDataUrl()<\/code>. \n        This method returns a data URL containing a representation of the image. \n        As we added the <code class=\"lang-markup\">download<\/code> attribute to the link, \n        we can now download the image by clicking on it.\n    <\/p>\n\n    <p>\n        With this the JavaScript for this project is done and it took us only 83 lines of code.\n    <\/p>\n\n    <p>\n        To see the complete code, including the CSS, you can check out my \n        <a href=\"https:\/\/codepen.io\/patriciamolnar\/pen\/ExLgoZL\" target=\"_blank\">CodePen<\/a>\n        or my \n        <a href=\"https:\/\/github.com\/patriciamolnar\/tutorials\/tree\/master\/Filter%20Photo%20App%20with%20JS\" target=\"_blank\">Github repo<\/a>\n    <\/p>\n\n    <p>\n        I hope this tutorial was helpful. For any questions \/ feedback, please reach out to me on Twitter \n        <a href=\"https:\/\/twitter.com\/pmcoding\" target=\"_blank\">@pmcoding<\/a>\n    <\/p>\n<\/section>","picture":null,"video":"https:\/\/www.youtube-nocookie.com\/embed\/RmWn-abDaZ4","embed":null,"intro":null,"read_time":null,"firstname":"Patricia","lastname":"Molnar","profile_image":null,"youtube":"https:\/\/www.youtube.com\/c\/pmCodingTutorials","twitter":"https:\/\/twitter.com\/pmcoding","codepen":"https:\/\/codepen.io\/patriciamolnar","description":"I love coding and creating."}}