Resize images in client side using uploadifive

Question

I have implemented an image upload page using uploadifive. Is there a way to re-size images on client side rather than do it on server side? If images can be re-size on client side it will reduce the time for upload the images.

Can anyone give me some example to do it.

Answer 1

Finally I implemented image resize functionality and included into uploadifive js.

I modified $data.uploadFile method (line no 363)

$data.uploadFile = function(file, uploadAll) {
    if (!file.skip && !file.complete && !file.uploading) {
        file.uploading = true;
        $data.uploads.current++;
        $data.uploads.attempted++;

        // Create a new AJAX request
        xhr = file.xhr = new XMLHttpRequest();

        // Start the upload
        // Use the faster FormData if it exists
        if (typeof FormData === 'function' || typeof FormData === 'object') {
            // Resizing starts
            var readerResize = new FileReader();
            readerResize.onload = function() {
                // Create a new FormData object
                var formData = new FormData();

                var dataURL = methods.getResizedDataULR(readerResize, file.type);

                // Convert resize dataURL into a blob again
                var blob = methods.dataURItoBlob(dataURL);

                // Append resized blob into form data with file name
                formData.append(settings.fileObjName, blob, file.name);

                // Add the rest of the formData
                for (i in settings.formData) {
                    formData.append(i, settings.formData[i]);
                }

                // Open the AJAX call
                xhr.open(settings.method, settings.uploadScript, true);

                // On progress function
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $data.progress(e, file);
                    }
                }, false);

                // On complete function
                xhr.addEventListener('load', function(e) {
                    if (this.readyState == 4) {
                        file.uploading = false;
                        if (this.status == 200) {
                            if (file.xhr.responseText !== 'Invalid file type.') {
                                $data.uploadComplete(e, file, uploadAll);
                            } else {
                                $data.error(file.xhr.responseText, file, uploadAll);
                            }
                        } else if (this.status == 404) {
                            $data.error('404_FILE_NOT_FOUND', file, uploadAll);
                        } else if (this.status == 403) {
                            $data.error('403_FORBIDDEN', file, uploadAll);
                        } else {
                            $data.error('Unknown Error', file, uploadAll);
                        }
                    }
                });

                // Send the form data (multipart/form-data)
                xhr.send(formData);
            };

            readerResize.readAsDataURL(file);

            // Resizing ends
        } else {

            // Send as binary
            // Don't change this else block

        }
    }
}  

and added helper methods as below

var methods = {
    .....
    // appended below new methods for resizing purpose

    dataURItoBlob: function (dataURI) {
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var binary = atob(dataURI.split(',')[1]), array = [];
        for (var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], { type: mimeString });
    },

    getResizedDataULR: function (reader, fileType) {
        var tempImg = new Image();
        tempImg.src = reader.result;

        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 600;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
                tempH *= MAX_WIDTH / tempW;
                tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
                tempW *= MAX_HEIGHT / tempH;
                tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(tempImg, 0, 0, tempW, tempH);
        return canvas.toDataURL(fileType);
    }
}