newImage() 的 setAttribute

Question

我正在通过 FileReader() 读取图像并创建一个新的图像对象以放入画布中。我成功地将图像放入我的画布，但我无法设置宽度和高度的属性以适合我的 600x800 画布。图像保留其原始大小。如何更改新 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 元素的 width 和 height，这对图像数据没有影响。要在绘制时缩放图像，您可以在drawImage() 调用期间传递width 和height。

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 为前缀的参数都引用了将放置图像的位置，即destination。