I have made an input form that receives uploaded files into a canvas element. Because different images e with different sizes, the uploaded image is always stretched to fit my canvas size which is 400 * 350.

How do I crop the exact center of the uploaded image to the ratio of my canvas size, so as to fit the the uploaded image into the canvas.

<input type='file' id="fileUpload" />
<canvas id="up_canvas" width="400" height="350" style="border: 1px solid red;"></canvas>

<script>
//get input as canvas
function el(id){return document.getElementById(id);}

var canvas_one  = el("up_canvas");
var context_one = canvas_one.getContext("2d");

function readImage() {
if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
       var img = new Image();
       img.onload = function() {
         context_one.drawImage(img, 0, 0, 400, 350);
       };
       img.src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
}
}

el("fileUpload").addEventListener("change", readImage, false);
</script>

I have made an input form that receives uploaded files into a canvas element. Because different images e with different sizes, the uploaded image is always stretched to fit my canvas size which is 400 * 350.

How do I crop the exact center of the uploaded image to the ratio of my canvas size, so as to fit the the uploaded image into the canvas.

<input type='file' id="fileUpload" />
<canvas id="up_canvas" width="400" height="350" style="border: 1px solid red;"></canvas>

<script>
//get input as canvas
function el(id){return document.getElementById(id);}

var canvas_one  = el("up_canvas");
var context_one = canvas_one.getContext("2d");

function readImage() {
if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
       var img = new Image();
       img.onload = function() {
         context_one.drawImage(img, 0, 0, 400, 350);
       };
       img.src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
}
}

el("fileUpload").addEventListener("change", readImage, false);
</script>

• javascript
• css
• html
• canvas

1 Answer 1

To draw specific part of the image, you must provide additional parameters in the drawImage() function. If you call it with 9 arguments, it is void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);, where s stands for source, and you specify which part of the provided image you want to draw.

We always crop rectangle with size 400x350, but we have to calculate the sx and sy attributes. In your case, you want to draw image like this:

context_one.drawImage(img, 
                      (img.width - 400) / 2,   // sx, 200 pixels to the left from center
                      (img.height - 350) / 2,  // sy, 175 pixels above center
                      400, 350, 0, 0, 400, 350);  // sw, sh, dx, dy, dw, dh

If you are providing smaller images too, the sx and sy parameters would be negative. You can take care of that case like this:

context_one.drawImage(img, 
                      Math.max(0, (img.width - 400) / 2),
                      Math.max(0, (img.height - 350) / 2), 
                      400, 350, 0, 0, 400, 350);  // sw, sh, dx, dy, dw, dh