使用 JavaScript 绘制到 HTML5 画布时调整 .png 图像的大小答案

【问题标题】：Resizing a .png image when drawing to HTML5 canvas using JavaScript使用 JavaScript 绘制到 HTML5 画布时调整 .png 图像的大小
【发布时间】：2012-05-05 21:08:14
【问题描述】：

我正在尝试使用 JavaScript 将一些 .png 图像绘制到 HTML5 画布上。我目前有一个函数可以将图像绘制到画布上，但是图像对于画布来说太大了，所以只显示了一部分。

我目前拥有的功能是：

function drawImage(x, y){
            var numberImage = new Image();
            numberImage.src = imageSource;
            context.drawImage(numberImage, x, y);

        }

我使用以下方法调用该函数：

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";

我只是想知道是否有人知道在将图像绘制到画布上时调整其大小的方法，以便我可以只使用缩略图大小的图像？

提前致谢！

我尝试在 drawImage 函数中添加参数来调整图像大小，但这似乎没有任何区别...

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";

【问题讨论】：

标签： javascript image html5-canvas

【解决方案1】：

您是否使用 CSS 来设置画布的大小？您需要在元素上设置高度和宽度，否则画布中的所有内容都将“意外”缩放。这可能是你的问题。

见Strange HTML5 Canvas drawImage behaviour

【讨论】：

【解决方案2】：

我在您的代码中找不到问题...但我找到了！

你会讨厌这个：你写的是 image.onLoad 而不是 image.onload...是的，javascript 区分大小写。 :-)

正确的代码是：

var image1 = new Image();

image1.onload = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";

【讨论】：

【解决方案3】：

drawImage() 需要额外的宽度和高度参数：

   context.drawImage(image, x, y, width, heighT)

https://duckduckgo.com/?q=!mdn+drawimage

【讨论】：

是的，该方法有两个“重载”版本。
我试过添加宽度和高度的参数，但是当我在浏览器中刷新页面时，图像仍然太大......
image1.onLoad = function(){ context.drawImage(image1, 50, 50, 10, 10); }; image1.src="1.png";
原始帖子已编辑，以显示添加的宽度和高度参数。
请发布您的代码的 jsfiddle。 Mikko 提交的代码运行良好