3

当在 HTML 的标签中设置了widthorheight属性时，为什么一个简单的 drawImage() 调用不会调整？img

这是一个 jsfiddle 演示来说明我的意思。

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 渲染显示图片的更大区域。很容易看出它没有调整大小 - “无穷大”符号的大小不同，它们应该是相同的。

4

2 回答 2

3

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

对于画布和绘制较小的较大图像，您必须在目标而不是源设置新大小。

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

（在您的图像加载事件中）：

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

在这里，您使用与原始图像相同的源进行绘制。这里的来源告诉画布使用整个图像。

然后你用你想要的大小把它画到目的地。

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

于 2013-06-30T05:39:59.703 回答
1

图像对象的width和height属性仅在您将对象放入 DOM 时由浏览器的渲染引擎使用。

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

使用时图像drawImage的.width和.height属性是不相关的。

.width但是，您可以.height在加载图像后使用来检测原始大小是多少，但更改它们只会影响该对象在 DOM 中的渲染方式。

于 2013-06-30T05:53:08.553 回答