javascript - 在已创建图像后调整当前 canvas 图像的大小

我正在尝试在 canvas 上创建一个较小的图像缩略图。我想要的缩略图大小是 200 x 200 根据文档,它应该像 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 都保存到服务器,并且两个图像的大小相同。我的假设是 ctx.drawImage 可以以不同的大小重复。知道如何实现这一目标吗?

回答1

drawImage() 方法的宽度和高度参数不会改变您绘制的 canvas 的尺寸。因此,如果您的源图像大于 canvas 它只会被裁剪。

要获得不同尺寸的快照,您需要在调用 drawImage() 之前将 canvas 的尺寸更改为所需的尺寸。

这是一个例子:

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