图像对象裁剪并在画布中心绘制

Question

如何裁剪图像，然后将其绘制在画布的中央？

目前，我有一个drop div，可以在其中放置图像，然后由JavaScript提取图像。然后，我希望JavaScript检查更高的值（高度或宽度）。如果高度最高，我希望它是200px，宽度要调整为宽高比。之后，我希望JavaScript在画布中绘制图像，其中图像的中心是画布的中心。

我拥有的当前代码不起作用（我不确定为什么）：

（为简单起见，我只是将图像从网络传递给了函数）

render('http://www.aboveandbeyond.nu/sites/www.aboveandbeyond.nu/files/news/europe_above_beyond_tour.jpg');



function render(src){

var image = new Image();
var canvas = document.getElementById("artworkcanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
image.onload = function(){

    var sourceX = 200;
    var sourceY = 0;
    var sourceWidth = 200;
    var sourceHeight = 200;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = canvas.width / 2 - destWidth / 2;
    var destX = 0;
    var destY = canvas.height / 2 - destHeight / 2;
    var destY = 0;
    var MAX_WIDTH = 200;
    var MAX_HEIGHT = 200;

    if (image.height == image.width) {
        image.width = MAX_WIDTH;
        image.height = MAX_HEIGHT;
    } else {            
        if(image.height < image.width) {
            console.log("height smaller");
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        } else {
            image.height *= MAX_WIDTH / image.width;
            image.width = MAX_WIDTH;
        }
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

image.src = src;

}

Answer 1

这是drawImage在保持纵横比的同时使用缩放比例版本的一种方法：

  // calc scale that fits into 200x200 and also maintains aspect ratio
  var scale=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height));

  ctx.drawImage(img,
            0,0,img.width,img.height,
            (canvas.width-img.width*scale)/2, (canvas.height-img.height*scale)/2,
                img.width*scale, img.height*scale
           );

示例代码和演示：

  // calc scale that fits into 200x200 and also maintains aspect ratio
  var scale=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height));

  ctx.drawImage(img,
            0,0,img.width,img.height,
            (canvas.width-img.width*scale)/2, (canvas.height-img.height*scale)/2,
                img.width*scale, img.height*scale
           );

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="http://www.aboveandbeyond.nu/sites/www.aboveandbeyond.nu/files/news/europe_above_beyond_tour.jpg";
function start(){

  var MAX_WIDTH = 200;
  var MAX_HEIGHT = 200;
  var iw=img.width;
  var ih=img.height;

  // calc scale that fits into 200x200 and also maintains aspect ratio
  var scale=Math.min((MAX_WIDTH/iw),(MAX_HEIGHT/ih));
  var sw=iw*scale;
  var sh=ih*scale;

  ctx.drawImage(img,
                0,0,iw,ih,
                (canvas.width-sw)/2,(canvas.height-sh)/2,iw*scale,ih*scale
               );

}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}