<分区>
我正在尝试在 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 的链接...