javascript - newImage() 的 setAttribute

Question

我正在通过 FileReader() 读取图像并创建一个新的图像对象以放入 Canvas 中。我成功地将图像放入 Canvas 中，但无法设置宽度和高度属性以适合我的 600x800 Canvas 。图像保留其原始大小。如何更改新 Image 对象的尺寸？

reader.onload = function(e) {
    var imgObj = new Image();
    imgObj.src = e.target.result;   //Successfully sets src
    imgObj.setAttribute("height", 200);
    imgObj.setAttribute("width", 400);
    ctx.drawImage(imgObj,0,0);  
}

Answer 1

在这里，您设置图像 HTML 元素的宽度和高度，这对图像数据没有影响。要在绘图时缩放图像，您可以在drawImage()期间传递宽度和高度打电话。

ctx.drawImage(imgObj, 0, 0, 400, 200);

根据文档，drawImage()接受以下任何一项:

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

这里，所有以 s 为前缀的参数都引用 source 图像，所有以 d 为前缀的参数都引用图像将要放置的位置， 目的地。