Изображение искажается и размывается в холсте с использованием 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); 
}