Use Instagram App Filter on Desktop Computer

Instagram filters using Google Apps Script

To make the app work, we will have to do the following:

  1. Accept an image on drag and drop;
  2. Create a new canvas element (original), with a max sizeof 500x500px (customizable) and keep it in memory;
  3. Listen for clicks on the filters. When one is selected:
    1. Create a clone of the original canvas;
    2. Remove any canvas elements currently on the page;
    3. Append the clone to the #photo div;
    4. If the selected filter is different from the “Normal” one, call the Caman library. Otherwise do nothing;
    5. Mark the selected filter with the “active” class.
  4. Trigger the “Normal” filter.

Now that we know what has to be done, let’s start coding!

// Source Code by: Sarmad Gardezi
$(function() {

    var maxWidth = 500,
        maxHeight = 500,
        photo = $('#photo'),
        originalCanvas = null,
        filters = $('#filters li a'),
        filterContainer = $('#filterContainer');

    // Use the fileReader plugin to listen for
    // file drag and drop on the photo div:

            load: function(e, file){

                // An image has been dropped.

                var img = $('').appendTo(photo),
                    imgWidth, newWidth,
                    imgHeight, newHeight,

                // Remove canvas elements left on the page
                // from previous image drag/drops.


                // When the image is loaded successfully,
                // we can find out its width/height:

                img.load(function() {

                    imgWidth  = this.width;
                    imgHeight = this.height;

                    // Calculate the new image dimensions, so they fit
                    // inside the maxWidth x maxHeight bounding box

                    if (imgWidth >= maxWidth || imgHeight >= maxHeight) {

                        // The image is too large,
                        // resize it to fit a 500x500 square!

                        if (imgWidth > imgHeight) {

                            // Wide
                            ratio = imgWidth / maxWidth;
                            newWidth = maxWidth;
                            newHeight = imgHeight / ratio;

                        } else {

                            // Tall or square
                            ratio = imgHeight / maxHeight;
                            newHeight = maxHeight;
                            newWidth = imgWidth / ratio;


                    } else {
                        newHeight = imgHeight;
                        newWidth = imgWidth;

                    // Create the original canvas.
         < canvas >');
                    var originalContext = originalCanvas[0].getContext('2d');

                    // Set the attributes for centering the canvas

                        width: newWidth,
                        height: newHeight
                        marginTop: -newHeight/2,
                        marginLeft: -newWidth/2

                    // Draw the dropped image to the canvas
                    // with the new dimensions
                    originalContext.drawImage(this, 0, 0, newWidth, newHeight);

                    // We don't need this any more


                    // Trigger the default "normal" filter

                // Set the src of the img, which will
                // trigger the load event when done:


            beforestart: function(file){

                // Accept only images.
                // Returning false will reject the file.

                return /^image/.test(file.type);

    // Listen for clicks on the filters{


        var f = $(this);

            // Apply filters only once
            return false;


        // Clone the canvas
        var clone = originalCanvas.clone();

        // Clone the image stored in the canvas as well

        // Add the clone to the page and trigger
        // the Caman library on it


        var effect = $.trim(f[0].id);

        Caman(clone[0], function () {

            // If such an effect exists, use it:

            if( effect in this){


    // Use the mousewheel plugin to scroll
    // scroll the div more intuitively

    filterContainer.find('ul').on('mousewheel',function(e, delta){

        this.scrollLeft -= (delta * 50);


< /canvas>

This example works in all browsers which support file drag/drop. Some of the filters are computationally intensive, so you will get a bit of a lag before the results show on screen. I have limited the maximum width/height of the image to be 500px in order to speed things up a bit, but you can change these values to your liking.

Related Article: Convert Speech to Text Using Google Apps Script

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter