Fabric.js 图片模糊

Question

我正在使用 Fabric.js 和 jQuery UI 作为拖放场景创建器。当我将图像拖放到 canvas 中时，图像变为 blurry/pixelated 并且似乎被放大了。我一直在搜索 Whosebug 和 Google，但找不到任何解决方案。如果有任何修复建议，我将不胜感激！

这是我的代码：

// HTML

<canvas id="scene"></canvas>

// Draggable setup

$('.scene-item').draggable({
    helper: 'clone',
    appendTo: 'body',
    containment: 'window',
    scroll: false,
    zIndex: 9999
});

// Drop Setup

var canvas = new fabric.Canvas('scene');

canvas.setDimensions({
    width: '800px',
    height: '500px'
}, {
    cssOnly: true
});
document.getElementById("scene").fabric = canvas;

canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    "object:modified": function(e) {
        e.target.opacity = 1;
    }
});


$('#scene').droppable({
    drop: function(e, ui) {
        if ($(e.target).attr('id') === 'scene') {
            var pointer = canvas.getPointer();
            fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
                console.log(img);
                img.set({
                    left: pointer.x - 20,
                    top: pointer.y - 20,
                    width: 52,
                    height: 52,
                    scale: 0.1
                });
                //canvas.clear();
                canvas.add(img);
                canvas.renderAll();
            });
        }
    }

});

这是打开和关闭 canvas 时的图像：

这是一个演示 jsfiddle.net/dmLr6cgx/1

Answer 1

我想通了。我不得不更换：

canvas.setDimensions({
        width: '800px',
        height: '500px'
    }, {
        cssOnly: true
    });

和

canvas.setHeight(500);
canvas.setWidth(800);
canvas.renderAll();

现在一切正常。

Fabric.js 图片模糊

Fabric.js Images blurry

javascript

jquery

canvas

jquery-ui-draggable

fabricjs