Javascript Fabric.js图像模糊

我正在使用Fabric.js和jQuery UI作为拖放式场景创建者。当我将图像拖放到画布中时，图像会变得模糊/像素化，并显示为放大。我一直在搜索Stackoverflow和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();
            });
        }
    }

});

//HTML
//可拖动装置
$（'.scene item'）。可拖动({
助手：“克隆”，
附于：'正文'，
遏制：“窗口”，
卷轴：错，
zIndex:9999
});
//放置设置
var canvas=newfabric.canvas（'scene'）；
canvas.setDimensions({
宽度：“800px”，
高度：“500px”
}, {
桑尼：是的
});
document.getElementById（“场景”）.fabric=canvas；
帆布({
“对象：移动”：函数（e）{
e、 target.opacity=0.5；
},
“对象：已修改”：功能（e）{
e、 target.opacity=1；
}
});
$（“#场景”）。可拖放({
drop：函数（e、ui）{
if（$（e.target）.attr（'id'）=='scene'）{
var pointer=canvas.getPointer（）；
fabric.Image.fromURL（ui.draggable[0].currentSrc，函数（img）{
控制台日志（img）；
img.set({
左：指针.x-20，
顶部：指针.y-20，
宽度：52，
身高：52，
比例：0.1
});
//canvas.clear（）；
canvas.add（img）；
canvas.renderAll（）；
});
}
}
});

这是画布上和画布下的图像的外观：

---

这是一个演示，我解决了这个问题。我必须替换：

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

与

---

现在它工作正常。

我解决了这个问题。我必须替换：

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

与

---

现在它工作正常。

你能在@DhirajBodicherla上创建一个示例演示吗？当然，在这里，你能在@DhirajBodicherla上创建一个示例演示吗？当然，在这里，哇，这是一个合法的解决方案。我通过构造器给出了高度和宽度，但这救了我一天。在最新版本中，它是requestRenderAll顺便说一句，你们能检查一下这个，告诉我为什么它会这样做吗？哇，这是一个合法的解决方案。我通过构造器给出了高度和宽度，但这救了我一天。在最新版本中，它是requestRenderAll顺便说一句，你们能检查一下这个，告诉我为什么它会这样做吗？