使用JavaScript绘制HTML5画布调整大小时一个PNG图片(Resizing a .png

我想提请一些。PNG图像使用JavaScript的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";

Answer 1:

我已经很难找到在你的代码的问题......但我发现它！

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

正确的代码是：

var image1 = new Image();

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

Answer 2:

您是否使用CSS来设置画布的大小？ 你需要设置元素的高度和宽度，而不是或一切都在你的画布将被调整“意外”。 这可能是你的问题。

见奇怪的HTML5画布的drawImage行为

Answer 3:

的drawImage（）需要额外的宽度和高度参数：

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

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

文章来源: Resizing a .png image when drawing to HTML5 canvas using JavaScript