Resize Images With Canvas Before Uploading

August 21, 2024 Post a Comment

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 i

Solution 1:

(#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:

varMAX_WIDTH = 400;        
varMAX_HEIGHT = 300;

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

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

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

// #3functionfitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT){

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

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

    // create a new canvasvar 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 imagereturn(c);
}

body{ background-color:white; }
img{border:1px solid red;}

Solution 2:

I would recommend using ajax for upload, since when you upload you redirect to the php page. But the example I didn't use it either

References:

    http://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename

   http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

    http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas 

     http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element

    http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing

Here is what I have for html

<!DOCTYPE html><html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no"><metacharset="utf-8"><style></style><title>Something</title></head><body><formaction="picupload.php"method="post"enctype="multipart/form-data"><inputname="uploadfile"type="file"accept="image/jpeg, image/png"><inputtype="submit"></form></body><scriptsrc="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script><script></script></html>

For PHP I used a different way for file upload (for instance I store the picture in localhost/):

<?phpif(isset($_FILES['uploadfile']['name'])){
    $nameFile=$_FILES['uploadfile']['name'];
    $pathFile = "C:/inetpub/wwwroot/" . $_FILES['uploadfile']['name'];

    $file_tmp2=$_FILES['uploadfile']['tmp_name'];
    move_uploaded_file($file_tmp2, $pathFile);
}


echo ("

<!DOCTYPE html>
<html>

<head>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
    <meta charset='utf-8'>
    <style>
    </style>
    <title>Something</title>
</head>
<body>
<canvas id='viewport' ></canvas>
<button onclick='change()'>change</button>
</body>
<script>
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = '").$_FILES['uploadfile']['name'];
  echo("';
    base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}


function change(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(base_image, 0, 0, 400 ,300);
}
</script>")

?>

biblioteczka-pelna-gwiazd

Resize Images With Canvas Before Uploading

Solution 1:

Solution 2:

Post a Comment for "Resize Images With Canvas Before Uploading"

Widget HTML #3