我们如何在 html5 画布上绘制调整大小的图像？

Posted 2023-03-14

【中文标题】我们如何在 html5 画布上绘制调整大小的图像？

【英文标题】：How do we draw a resized image on an html5 canvas?

【发布时间】：2014-07-24 17:39:18

【问题描述】：

我有一张要在 html5 画布上绘制的图像。我想在绘制到画布上之前将此图像调整为一定的高度和宽度。我的代码目前包括：

img = new Image();
img.src = "vivo.jpg";

// calcuate new height and width

img.height = newheight;
img.width = newwidth;
$("#cnvs").attr(
    "height" : newheight,
    "width" : newwidth
    );
context.drawImage(img, 0, 0);

仅当我在 context.drawImage() 函数本身中包含宽度和高度参数时，该代码才有效。但我不明白的是，为什么图像在 context.drawImage() 函数访问它之前没有调整大小。

我还打印了警报语句来检查“img.height”和“img.width”，它确实设置为newheight、newwidth 的值。为什么 context.drawImage() 会访问旧的高度和宽度值？

编辑 - 此外，当我在网页上（不是在画布上，而只是在网页上）显示图像时，会显示调整大小的图像。但画布不显示调整大小的图像。我不明白为什么

【参考方案1】：

它不起作用的原因是因为您正在更改<img> HTML 节点的属性。这些属性是节点如何在文档中显示的布局说明（顺便说一句，这些属性已过时。使用 CSS 进行布局）。 image-element中显示的图片素材的宽高与此无关。

【讨论】：

+1 正确...更直接地说：当canvas 使用imageObject 作为drawImage 中的源时，canvas 始终绘制该图像的原始大小——无论原始imageObject 的大小如何调整。