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

Resizing a .png image when drawing to HTML5 canvas using JavaScript

本文关键字：图像 png 调整 布时 绘制 JavaScript HTML5 使用      更新时间：2023-09-26

我正在尝试使用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";

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

请参阅奇怪的 HTML5 画布绘制图像行为

我很难在你的代码中找到问题......但我找到了！

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

正确的代码是：

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

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

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

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

相关文章：