jquery - Fabric.js Image.fromURL not working in Firefox -
i using fabric.js , jquery ui drag , drop scene creator. when drag , drop image canvas on chrome works fine. however, when drag , drop image on firefox nothing , following error in console:
typeerror: t undefined here code:
// 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(); }); } } }); any ideas happening?
edit:
i used regular fabric.js instead of minified version , error was:
typeerror: event undefined
i figured out wrong. not passing event getpointer() function.
this code works fine:
$('#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(); }); } } });
Comments
Post a Comment