javascript - Fabric.js で画像の縦横比を維持する

Question

キャンバスに読み込まれた画像の縦横比を維持するにはどうすればよいですか? 画像がローカル システムからキャンバスに読み込まれると、 と を使用して画像オブジェクトを作成しwidth=canvas.widthますheight=canvas.height。

しかし、品質が欠けています。ロードされた画像の解像度が高くても。読み込まれた画像の縦横比を維持する方法はありますか?

Answer 1

キャンバスを画像で塗りつぶし、比率を維持し、オーバーフローを非表示にする必要がありますか?

それらを再計算する必要があります。

cw, ch- キャンバスの寸法

iw、ih- 画像の寸法

ih = imgObj.naturalHeight;
iw = imgObj.naturalWidth;

fw、fh- 最終寸法

width_ratio  = cw  / iw;
height_ratio = ch / ih;
if (width_ratio > height_ratio) {
    fw = iw * width_ratio;
    fh = ih*fw/iw;
} else {
    fh = ih * height_ratio;
    fw = iw*fh/ih;    
}

次に、このようなオプションをフィードするだけです

var image = new fabric.Image(imgObj);
image.set({
    width:fw,
    height:fh
});

canvas.add(image);