gpt4 book ai didi

javascript - 使用 Canvas 调整图像大小而不失真

转载 作者:行者123 更新时间:2023-11-30 12:06:02 25 4
gpt4 key购买 nike

<分区>

我正在尝试在 Canvas 内加载存储在本地计算机中的图像文件。我可以在 Canvas 中加载图像,但如果图像的宽度或高度非常大,图像就会变形。我想使用 Canvas 将图像的尺寸调整为 300 x 300,而不管图像的大小如何都不会扭曲图像。我尝试了很长时间,但无法弄清楚我哪里出错了。请帮助..

HTML代码..

 <input type="file" id="ifile">
<canvas id="panel"></canvas>

JS 代码..

 //beginning of image display
canvasCtx = document.getElementById("panel").getContext("2d");

document.getElementById("ifile").onchange = function(event) {

this.imageFile = event.target.files[0];

var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
//img.style.width = "300px";
//img.style.height = "300px";

img.onload = function() {
drawImage(img);
}
img.src = event.target.result;

}
reader.readAsDataURL(this.imageFile);
}

drawImage = function(img) {
this.canvasCtx.canvas.width = 300;//img.width;
this.canvasCtx.canvas.height = 300;//img.height;
this.canvasCtx.drawImage(img,0,0,300,300);
url = canvasCtx.canvas.toDataURL();
console.log(url);
}
//end of image display

下面也给出了 JS Fiddle 的链接...

JS Fiddle

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com