使用Fabric JS的画布中的新图像不适用于Chrome

Question

I use fabric.js to manage my canvas, however when I make new fabric.Image after dropped a picture in my canvas it's doesn't work in chrome!

there is my code :

var imgElement = document.getElementById(idImageToDrage);

var imgInstance = new fabric.Image(imgElement, {
    id: parseInt(idImageToDrage),
    left: calculPositionLeft, // position when I drop the picture
    top: calculPositionTop,
    scaleX: 0.147,
    scaleY: 0.147,
    angle: 0,
    zindex: $('#containerInnerImgToDrag').children().length,
    name: 'img'
});

imgInstance.setControlsVisibility({ 'bl': false, 'br': false, 'mb': false, 'ml': false, 'mr': false, 'mt': false, 'tl': false, 'tr': false });
canvas.add(imgInstance);

This code work for Firefox, what can I do ?

Thanks!

Answer 1

You need to use

var objectDropped = ui.draggable[0];

var imgInstance = new fabric.Image(objectDropped, {

Dropped image element as source for fabric image.

Here is updated fiddle