使用JavaScript绘制到HTML5画布时调整.png图像的大小
使用JavaScript绘制到HTML5画布时调整.png图像的大小
提问于 2012-04-25 15:36:28
我正在尝试使用JavaScript在HTML5画布上绘制一些.png图像。我目前有一个函数可以将图像绘制到画布上，但是图像对于画布来说太大了，所以只显示了其中的一部分。
我目前拥有的功能是：
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";回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-25 19:45:48
我很难在你的代码中找到问题...但是我找到了！
你会讨厌这个的:你写的是image.onLoad而不是image.onload...是的，javascript是区分大小写的。:-)
正确的代码是：
var image1 = new Image();
image1.onload = function(){
context.drawImage(image1, 50, 50, 10, 10);
};
image1.src="1.png";Stack Overflow用户
发布于 2012-06-20 20:37:42
您是否使用CSS来设置画布的大小？您需要在元素上设置高度和宽度，否则画布中的所有内容都将被“意外”缩放。这可能是你的问题。
Stack Overflow用户
发布于 2012-04-25 15:39:12
drawImage()接受额外的宽度和高度参数：
context.drawImage(image, x, y, width, heighT)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10311311
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号