圖像使用fabricjs在畫布中變形和模糊

Question

我正在上傳圖像，然後使用fabricjs將其顯示在畫布上。上傳的圖片很好。但是當我用帆布裝入它時，它扭曲且模糊。 這是我用來在畫布中加載圖像的代碼。

$("#canvas_area").append('<canvas id="c"></canvas>'); 
var canvas = new fabric.Canvas('c'); 
canvas.setDimensions({ 
    width: '100%', 
    height: '100%' 
}, { 
    cssOnly: true 
}); 
var imgElement = response.uploaded_file; 
fabric.Image.fromURL(imgElement, function (img) { 
    img.set({ 
     borderColor: 'red', 
     cornerColor: 'green', 
     cornerSize: 6, 
     transparentCorners: false 
    }); 
    if (img.height > img.width) { 
     img.scaleToHeight(80); 
    } 
    if (img.height < img.width) { 
     img.scaleToWidth(120); 
    } 
    if (img.height == img.width) { 
     img.height = 100; 
     img.width = 200; 
    } 
    img.set('left', 10); 
    img.set('top', 10); 
    img.setCoords(); 
    canvas.add(img); 
}); 

此外，它調整大小的方形圖像（圖像寬度==圖像高度）爲矩形形狀的圖像。

任何幫助將不勝感激。感謝

Answer 1

你的代碼集在第三if：

if (img.height == img.width) { 
    img.height = 100; 
    img.width = 200; 
} 

所以任何方（1：1）圖像失真是一個2：1的圖像。

我會寫這樣的調整大小：

if (img.height > img.width) { 
    img.scaleToHeight(80); 
} 
if (img.height <= img.width) { //include square images here 
    img.scaleToWidth(120); 
}