在组合fabric.js和jQuery时,将图像拖放到画布不起作用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在组合fabric.js和jQuery时,将图像拖放到画布不起作用相关的知识,希望对你有一定的参考价值。
我正在尝试设置fabric.js画布,以便用户可以将图像文件从系统拖放到画布上。在寻找一种方法时,我找到了this pen,它可以正常工作,但我也使用jQuery,我喜欢在文档的开头创建我的主变量/函数,并在以后根据需要调用它们。
当我重新组织代码以匹配我的设置时,drop函数停止工作。 Here's a pen(or a fiddle,如果你愿意的话)模仿我想要使用的设置。
这是笔的下拉功能我基于这个:
var canvas_container = document.getElementById('canvas-container');
var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext('2d');
canvas_container.addEventListener('drop', function (e) {
console.log("DROP");
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
var dt = e.dataTransfer;
var files = dt.files;
for (var i=0; i<files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
var imgInstance = new fabric.Image(img, {
left: 100,
top: 100,
});
canvas.add(imgInstance);
}
reader.readAsDataURL(file);
}
return false;
});
我想使用的设置:
var $main = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
dropImage = function (e) {
var dt = e.originalEvent.dataTransfer,
files = dt.files;
e = e || window.event;
e.preventDefault();
e.stopPropagation();
console.log("Drop started");
$('.refs').removeClass('highlight');
canvas.remove(introTxt);
//Loop through files
for (var i=0; i<files.length; i++) {
var file = files[i],
reader = new FileReader();
reader.onload = loadReader(e);
reader.readAsDataURL(file);
}
function loadReader(e) {
var img = new Image();
img.src = e.target.result;
var imgInstance = new fabric.Image(img, {
left: 100,
top: 100
});
canvas.add(imgInstance);
console.log('Images found');
}
console.log('Drop done');
};
$main.on('drop', dropImage);
“完成删除”文本记录在控制台上,但画布上实际上没有显示任何图像。我完全不知道为什么这不起作用。
此外,这将是Photoshop扩展的一部分,Adobe扩展在Chromium上运行。所以,这只需要在Chrome中运行。
答案
你需要做你的掉落处理程序
reader.onload = loadReader;
并在image onload事件上添加图像到画布
function loadReader(event) {
var img = new Image();
img.src = event.target.result;
img.onload = function(){
var imgInstance = new fabric.Image(img, {
left: 100,
top: 100
});
canvas.add(imgInstance);
}
}
这是更新的jsfiddle
以上是关于在组合fabric.js和jQuery时,将图像拖放到画布不起作用的主要内容,如果未能解决你的问题,请参考以下文章