setIttribute of newImage（）

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。