Image Compression using Javascript

I have made a plugin that enables you upload image files to the server with a front-end side compression using javascript. So basically the image that you upload gets redrawn on the canvas with new dimension that you specify in the options and a compressed base64 encoded string is obtained from it. Now most of us these days have a phone with a fancy camera, that clicks the images of sizes of around 8-13 MB. So uploading that kind of size onto the server is totally not acceptable. So you wish to either compress on front end side or the server side. Android has some libraries that allows you to compress the files before sending onto the server, but on the other hand there is no such solid lead available on the browser side.

So here’s a plugin that comes to the rescue.

You can find the related files on my github repo

I have listed out the events, methods and options for incorporating the plugin.

Methods

uploadFile(options)

This is the initializer function for upload file plugin. Just call this function on the div on which you want to trigger the upload file plugin, with the options object.

$(‘#divID’).uploadFile(options)

startUpload()

This function starts the upload by making a post call to the server. For this function to work you have to disable autoSubmit property of uploadFile.

$(‘#divID’).startUpload()

stopUpload()

This function stops the upload by setting a flag to disable the form submission.

$(‘#divID’).stopUpload()

remove()

This function as by the name removes the upload area from the DOM.

$(‘#divID’).remove()

Options

url

Specify the url in the option on which to submit your form data.

sizeLimit

Specify the size limit that you want to set for the image file before compression. Default value is 16 MB

maxWidth

Set the maxwidth for image as it gets resized. Default value is 500

maxHeight

Sets the maxheight for image as it gets resized. Default value is 500

quality

Sets the quality that you want the image to be in. Default value is 0.5

outputType

Specify the output file type that you want to submit to server. Default value is png.

isBase64

Its a flag which when true sends the image as a base64 string to server and when false sends a blob object. Default value is false.

allowFileType

In this you have to pass an array of accepted file types for the image. Default value is [‘jpg’, ‘png’, ‘jpeg’]

enablePreview

Flag which when true shows the preview of the image that is going to be sent to server. Default value is false

previewSelector

This option is dependent on the enablePreview option. You have to specify the container element in which you want the preview to be seen. Its also helpful when you have set the autoSubmit property to false.

inputFieldName

The key for the image object which you want to send in the formData. Default value ‘avatar’

autoSubmit

Flag for auto submission of the form on upload. Default value is true

isDragNDrop

Flag for enabling the drag N drop feature on your upload area. Default value is true

appendFileInput

In case you want to handle styling of input type = “file” tag on your own. You can set this option to false. As this option will append the input type = “file” in your upload area div. So when you set it to false, you have to also write the input tag inside the upload area div. Default value is true

fileInputSelector

This is dependent on appendFileInput property. If you have set appendFileInput to false then you have to specify the ID of the input file tag in this option.

allowMultiple

Flag which when true allows to upload multiple images at a time. However be careful to increase the payload limit of your server, as it might get big. Default value is false

maxFiles

Now if you allow multiple input on the plugin, then you can specify the maximum no. of files you want to allow at a time.

Events

onLoad

Event is fired on plugin load

beforeSubmit

Event is fired just before submit of file

onSuccess

Event is fired on successfull upload

onError

Event is fired on error.

I haven’t done anything on the styling part, coz i guess most of you would want to do it on your side, since everybody wants a custom thing. So you can go through the IDs of the element that i have created and style it on your own. This repo only contains a simple JS file.

So feel free to write any suggestions.