Question

我试图在画布中加载存储在本地机器中的图像文件。我能够在画布中加载图像，但如果图像的宽度或高度非常大，则图像会变形。我想使用画布将图像尺寸调整为300 x 300尺寸，而不会扭曲图像而不管图像的大小。我尝试了很长时间，但无法弄清楚我哪里出错了。请帮忙..

HTML代码 ..

JS代码 ..

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

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

JS Fiddle

Answer 1

更改您的drawImage功能，如下所示。我已经在顶部声明了一个全局变量canvas。

drawImage = function(img) {
    // if else to keep aspect ratio in 300X300
    if(img.width>img.height){
        canvas.width = 300;
        canvas.height = 300 / img.width * img.height;
    } else {
        canvas.width = 300 / img.height * img.width;
        canvas.height = 300;
    }    

    this.canvasCtx.drawImage(img, 0, 0, canvas.width, canvas.height);
    url = canvasCtx.canvas.toDataURL();
}

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

1 个答案:

UPDATED FIDDLE