我有一个图像要在 html5 Canvas 上绘制。我想在绘制到 Canvas 上之前将该图像调整为一定的高度和宽度。我的代码目前包括:
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() 会访问旧的高度和宽度值?
编辑 - 此外,当我在网页上显示图像(不是在 Canvas 上,而是在网页上)时,会显示调整大小的图像。但 Canvas 不显示调整大小的图像。我不明白为什么
最佳答案
它不起作用的原因是您正在更改 <img>
的属性HTML 节点。这些属性是节点如何在文档中显示的布局指令(顺便说一句,它们已经过时了。使用 CSS 进行布局)。图像元素中显示的图像素材的宽度和高度与此无关。
关于javascript - 我们如何在 html5 Canvas 上绘制调整大小的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24031206/