Блог

Я создал форму ввода, которая принимает загруженные файлы в элемент canvas. Поскольку разные изображения имеют разные размеры, загруженное изображение всегда растягивается, чтобы соответствовать моему размеру холста, который равен 400 * 350 .

Как мне обрезать точный центр загруженного изображения в соответствии с размером моего холста, чтобы поместить загруженное изображение на холст.

 <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 amp;amp; 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>
  

Чтобы нарисовать определенную часть изображения, вы должны указать дополнительные параметры в drawImage() функции. Если вы вызываете его с 9 аргументами, это void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); , где s означает источник, и вы указываете, какую часть предоставленного изображения вы хотите нарисовать.

Мы всегда обрезаем прямоугольник размером 400×350, но нам нужно вычислить атрибуты sx и sy . В вашем случае вы хотите нарисовать изображение следующим образом:

 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
  

Если вы также предоставляете изображения меньшего размера, параметры sx и sy будут отрицательными. Вы можете позаботиться об этом случае следующим образом:

 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