Fabric.js圖像模糊

我使用Fabric.js和jQuery UI作爲拖放場景創建器。當我將圖像拖放到畫布上時，圖像變得模糊/像素化並且顯示爲放大。我一直在搜索Stackoverflow和Google，並且找不到任何解決方案。我會很感激有關如何修復它的任何建議！Fabric.js圖像模糊

這裏是我的代碼：

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

});

這是圖像的樣子和關閉帆布：

enter image description here

這裏是一個演示jsfiddle.net/dmLr6cgx/1

來源

2015-05-30 Swappticon

你可以在http://jsfiddle.net上創建一個示例演示嗎？ – Dhiraj

@DhirajBodicherla當然，這裏是https://jsfiddle.net/dmLr6cgx/1/ – Swappticon

我找出問題所在。我不得不更換：

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

與

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

而現在它工作正常。

來源

2015-05-30 18:31:51 Swappticon

哇這是一個合法的解決方案。我通過構造函數給出了高度和寬度，但是這節省了我的一天。在最新版本中，它是requestRenderAll btw。 – Axl

Fabric.js圖像模糊

回答

相關問題