javascript - 使用 Fabricjs 在 Canvas 中图像变得扭曲和模糊

Question

我正在上传图像，然后使用fabricjs 将其显示在 Canvas 中。上传的图片没问题。但是当我将其加载到 Canvas 中时，它会变形且模糊。 这是我用来在 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);
});

它还将方形图像(图像宽度==图像高度)调整为矩形图像。

任何帮助将不胜感激。谢谢

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);
}