Dan Green Dan Green - 1 year ago 65
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

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
    - 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]">


    $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'] ,

  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 Source

(#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();
function start(){

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

    // #4
    // convert the canvas to an img
    var imgResized=new Image();
        // Use the new imgResized as you desire
        // For this demo, just add resized img to page

// #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

    // scale & draw the image onto the canvas
    // return the new canvas with the resized image
body{ background-color:white; }
img{border:1px solid red;}