javascript resize image [reduce size] and upload

Question

Is it possible to resize the image with javascript or Flash ?

My requirement:

A user uploading a image with 10MB in size,i want to re size the image on client side using Javascript or flash,after resizing the image,it need to be uploaded to the server.

If it is possible i can save the bandwidth.

I am using uploadify for upload images and Codeigniter on the Server Side.

is there any other methods to do this ?

Note : Reference to some Libraries are really helpful.

Thank you.

Answer 1

Yes, it is possible in Flash Player 10 and later.

This is an old blog post, from when Flash Player 10 and the FileReference.load() function was new, back in 2008, and it doesn't cover all steps needed, but it's a start:

http://www.mikechambers.com/blog/2008/08/20/reading-and-writing-local-files-in-flash-player-10/

You would probably also need to look into how to resize a bitmap in ActionScript, how to encode the bitmap as JPEG or PNG (using as3corelib) and how to upload the result to the server.

Edit: http://www.plupload.com seems to have support for resizing. There's also http://resize-before-upload.com/

Answer 2

Yes it's possible to resize an image in javascript using the HTML5 canvas API. You, however, will need to save it somewhere after being resized.

• The first API you will need to check is drawImage.
• The second one is toDataURL.

Depending on what you want to do, you can either:

• Make the user save the smaller image using this client side script.
• Store it yourself using a server-side language, to convert a Base64 Encoded Image to an actual image file, and save it on your server. Check out Example 1.

Example 1: PHP5 based solution:

<?php
    define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
?>

UPDATE #2:

As stated in the comments below, this method requires a modern browser that supports File APIs to work. Use the flash method instead to support both modern and non-html5 browsers.

Answer 3

If you using JSON to upload use the following code

function UploadPhoto(img) {

    var uri = "http://domain/App/AppService.svc/GetImg/New";
    var imgElem = document.getElementById(img);
    var imgData = JSON.stringify(getBase64Image(imgElem));

    alert(imgData);
    $.ajax({
        url: uri,
        contentType: 'application/json',
        dataType: 'json',
        type: 'POST',
        data: imgData,
        error: function () {
            alert('failed');
        },
        success: function () {
            alert('Sucess');
        }
    });


}
function getBase64Image(imgElem) {
    var width = 100;
    var height = 150;

    // imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0, width, height);
    ctx.scale(width, height)
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}