在已经创建一个图像后调整当前 canvas 个图像的大小

Question

我正在尝试在 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 可以用不同的大小重复。知道如何实现吗？

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

在已经创建一个图像后调整当前 canvas 个图像的大小

Resize a current canvas image after one has already been created

html

javascript

canvas

html5-canvas