Fabric.js Image.fromURL 在 Firefox 中不起作用答案

【问题标题】：Fabric.js Image.fromURL not working in FirefoxFabric.js Image.fromURL 在 Firefox 中不起作用
【发布时间】：2015-08-13 10:29:38
【问题描述】：

我正在使用 Fabric.js 和 jQuery UI 作为拖放场景创建器。当我将图像拖放到 Chrome 上的画布中时，一切正常。但是，当我在 Firefox 上拖放图像时，它什么也不做，并且在控制台中出现以下错误：

TypeError: t is undefined

这是我的代码：

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

    });

对正在发生的事情有什么想法吗？

编辑：

我使用常规的 fabric.js 而不是缩小版，错误是：

TypeError: event is undefined

【问题讨论】：

标签： jquery meteor drag-and-drop jquery-ui-draggable fabricjs

【解决方案1】：

我知道出了什么问题。我没有将事件传递给 getPointer() 函数。

这段代码现在可以正常工作了：

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

    });

【讨论】：