在创建了当前画布图像后重新调整其大小

Question

我试图在画布上创建一个较小的图像缩略图。我想要的缩略图尺寸是200x200根据文档，它应该像drawImage(img, 0,0,200,200)一样简单，但我得到了相同的结果，这是我的代码:

_canvas = document.createElement('canvas'),
ctx = _canvas.getContext("2d"),
img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0, 1200, 600);
var dataURL = _canvas.toDataURL();
// The above creates the first image 
//Then while I'm still in the load method I attempt to save another size:
ctx.drawImage(this,0,0,300,300);
var dataThumbURL = _canvas.toDataURL();

}

我将dataURL和dataThumbURL保存到服务器，并且两个图像的大小相同。我的假设是x。可以用不同的大小重复drawImage。知道我该怎么做吗?

Answer 1

drawImage()方法的宽度和高度参数不会改变您绘制的画布的尺寸。因此，如果你的源图像比画布大，它将被简单地裁剪。

要有不同大小的快照，你需要在调用drawImage()之前将画布的尺寸更改为所需的大小。

下面是一个例子:

let image = new Image();
let _canvas = document.createElement('canvas');
let ctx = _canvas.getContext("2d");
image.crossOrigin = "";
image.onload = function() {
let img, dataURL;
_canvas.width = 200;
_canvas.height = 150;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
_canvas.width = 40;
_canvas.height = 30;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
}
image.src = "https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/200/300";