使用JavaScript绘制到HTML5画布时调整.png图像的大小 [英] Resizing a .png image when drawing to HTML5 canvas using JavaScript

问题描述

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

I am trying to draw a few .png images to the HTML5 canvas using JavaScript. I currently have a function that will draw an image to the canvas, but the image is too large for the canvas, so only part of it displays.

我目前的功能具有：

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

        }

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

and I call the function by using:

var image1 = new Image();

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

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

I was just wondering if anyone knows of a way of resizing an image when it's drawn to the canvas, so that I could just a thumbnail sized image?

提前致谢！

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

I have tried adding parameters in to the drawImage function to resize the image, but this doesn't seem to have made any difference...

var image1 = new Image();

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

推荐答案

我在代码中发现问题时遇到了麻烦。但是我找到了它！

I had trouble finding the problem in your code... But I found it !

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

You gonna hate this : you wrote image.onLoad instead of image.onload... yes, javascript is case-sensitive. :-)

正确的代码是：

var image1 = new Image();

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

这篇关于使用JavaScript绘制到HTML5画布时调整.png图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！