Dan Green Dan Green - 4 months ago 19
HTML Question

Resize images with canvas before uploading

I have recently written a script to upload images. Everything works well. But now I want to resize the image after uploading it. I have done some research on it and I want to try it with the

<canvas>
element. I have parts of the script, others are missing and I don't know how to connect everything.

These are the steps:


  1. Upload the image into
    img/uploads
    - Done.

    <form action="picupload.php" method="post" enctype="multipart/form-data">
    <input name="uploadfile" type="file" accept="image/jpeg, image/png">
    <input type="submit" name="btn[upload]">
    </form>


    picupload.php:

    $tmp_name = $_FILES['uploadfile']['tmp_name'];
    $uploaded = is_uploaded_file($tmp_name);
    $upload_dir = "img/uploads";
    $savename = "[several code]";


    if($uploaded == 1)
    {
    move_uploaded_file (
    $_FILES['uploadfile']['tmp_name'] ,
    "$upload_dir/$savename");
    }

  2. Put the image into a canvas element - Missing

  3. Resize it - Part of the code I want to use somehow:

    var MAX_WIDTH = 400;
    var MAX_HEIGHT = 300;
    var width = img.width;
    var height = img.height;

    if (width > height) {
    if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
    }
    } else {
    if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
    }
    }

  4. Replace the existing image with the new resized one. - Missing



It would be very nice if someone would give me some tips to complete it - Thank you!

Answer

(#2-3) Resizing the source image onto a canvas

  • Calculate the scaling factor required to fit MAX dimensions without overflow
  • Create a new canvas with the scaled dimensions
  • Scale the original image and draw it onto the canvas

Important! Be sure the source image is coming from the same domain as your web page or else toDataURL will fail for security reasons.

(#4) You can convert the canvas from #3 to an image with resizedImg.src=context.toDataURL

Example annotated code and a Demo:

var MAX_WIDTH = 400;        
var MAX_HEIGHT = 300;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
function start(){

    var canvas=fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT);

    // #4
    // convert the canvas to an img
    var imgResized=new Image();
    imgResized.onload=function(){
        // Use the new imgResized as you desire
        // For this demo, just add resized img to page
        document.body.appendChild(imgResized);
    }
    imgResized.src=canvas.toDataURL();
    
}

// #3
function fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT){

    // calculate the scaling factor to resize new image to 
    //     fit MAX dimensions without overflow
    var scalingFactor=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height))

    // calc the resized img dimensions
    var iw=img.width*scalingFactor;
    var ih=img.height*scalingFactor;

    // create a new canvas
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');

    // resize the canvas to the new dimensions
    c.width=iw;
    c.height=ih;

    // scale & draw the image onto the canvas
    ctx.drawImage(img,0,0,iw,ih);
    
    // return the new canvas with the resized image
    return(c);
}
body{ background-color:white; }
img{border:1px solid red;}