Изображение искажается и размывается в Canvas с использованием Fabricjs

Я загружаю изображение, а затем отображаю его на холсте с помощью 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);
});

Также он изменяет размер квадратного изображения (ширина изображения == высота изображения) в изображение прямоугольной формы.

Любая помощь будет высоко ценится. Спасибо


javascript canvas jquery fabricjs
person Nauman    schedule 22.05.2015    source источник
comment
что-то вроде этого jsfiddle.net/dhirajbodicherla/Vp6wa/183?   -  person Dhiraj    schedule 22.05.2015
comment
Почему он изменяет размер квадратного изображения (ширина изображения == высота изображения) в изображение прямоугольной формы. У меня тоже есть эта проблема.   -  person Nauman    schedule 22.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

Ваш код устанавливается в третьем 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);
}
person Pablo Lozano    schedule 27.05.2015