Изображението се изкривява и замъглява в Canvas с помощта на fabricjs

Качвам изображение и след това го показвам в платно с помощта на fabricjs. Каченото изображение е наред. Но когато го заредя в платно, той е изкривен и замъглен. Ето кода, който използвам за зареждане на изображение в canvas.

$("#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