HTML

<!--Try adding width="200" to the img tag below. 
    You'll see that the original image (left on 
    the output) is resized accordingly, but the 
    drawImage rendering is not. If you console.log 
    imgs.width, it's set to 200, but the 
    result is unchanged.
-->
<img src="https://i.imgur.com/mbXJe0f.png" width="200">

的JavaScript

imgs = document.getElementsByTagName('img')[0];

//I set EVERYTHING I know about to the proper values, just to see what happens
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
style = '';
style += 'width:'+imgs.width+'px;';
style += 'height:'+imgs.height+'px;';
canvas.setAttribute('style',style);
canvas.width = imgs.width;
canvas.height = imgs.height;

console.log(imgs.width,imgs.height);

var testImage = new Image();
testImage.src = imgs.src;
testImage.width = imgs.width;
testImage.height = imgs.height;
testImage.onload = function() {
    square = 100;
    context.drawImage(this,150,70,square,square,0,0,square,square);
}

在该演示中，如果您在唯一的width标记上设置img属性，您会看到左侧的图像发生变化（原始图像），但右侧的图像会发生变化不（drawImage渲染）。

我知道我将testImage.src设置为原始src，但我还设置了宽度和高度，如果打开开发人员控制台日志，则会调整宽度和高度。

这是为什么？我可以调整该代码，以便相应调整吗？

此处的预期结果是drawImage渲染显示图片的更大区域。很容易判断它没有调整大小 - “无限”符号是不同的大小，它们应该是相同的。

Answer 1

您无法更改原始图像的大小。您只能使用CSS重新调整大小，这会导致缩放 - 但原始大小将是原始大小，因此更改图像的宽度和高度属性将不起作用（为了缩放它，您可以使用img.style.width和img.style.height，但这不会影响数据本身，只会将其呈现给浏览器窗口。）

对于画布并绘制较小的较大图像，您必须在目标上设置新尺寸，而不是 source 。

修改小提琴：
http://jsfiddle.net/L3495/4/

（在你的图片onload事件中）：

context.drawImage(this, 0, 0, this.width, this.height,
                        0, 0, newWidth, newHeight);

在这里，您使用 source 绘制与原始图像相同的内容。 Source在这里告诉画布使用整个图像。

然后用你想要的尺寸把它画到目的地。

在小提琴中你看到我为原始图像设置了画布的半尺寸以进行演示。这将是为目标值绘制图像的大小。

Answer 2

当您将对象放在DOM中时，图像对象的width和height属性仅由浏览器的呈现引擎使用。

在drawImage调用中，您可以指定目标位置（不进行缩放），目标矩形（缩放将完成）或目标和源矩形（缩放将完成）。

使用drawImage时，图片的.width和.height属性无关紧要。

您可以在加载图片后使用.width和.height来检测原始尺寸，但更改它们只会影响在DOM中完成该对象的渲染。

HTML5 Canvas - 来自HTML大小调整图像的drawImage

HTML

的JavaScript

2 个答案: