我正在尝试创建一个函数,将用户剪贴板中的图像粘贴到画布上new fabric.Image()
。我找到的任何搜索结果都描述了画布上已有的克隆对象或粘贴IText数据。这个问题与我所询问的问题有关,但它已经有4年了,最佳答案中的功能不起作用:
How to do Copy and paste the image from User system to Canvas using fabric.js
这是我目前正在尝试使用的代码。我正在尝试设置一个我可以稍后调用的粘贴函数:
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
// Fabric.js image function
function canvasImage(url) {
var img = new fabric.Image(url);
img.scale(0.75).center().setCoords();
canvas.add(img).renderAll();
}
//Loop through files
for(var i=0;i<items.length;i++){
var file = items.items[i],
type = file.type;
if (type.indexOf("image")!=-1) {
var imageData = file.getAsFile();
var imageURL=window.webkitURL.createObjectURL(imageData);
canvasImage(imageURL);
}
}
};
$wrapper.on('paste', pasteImage);
Here's a fiddle看到它在行动(或无效,我猜)。这最终将成为Photoshop插件的一部分,所以谢天谢地,我只需要担心这在Chrome中工作。
答案 0 :(得分:0)
我无法触发你的粘贴事件处理程序,因为我不确定div是否可以原生地接受过去的事件,除非你使它成为一个可信的div,在你的用例中我怀疑你想做什么。 / p>
我最近在我自己的应用程序中实现了这个,但我没有使用fabric,只是原生canvas和js。
您将不得不重做代码,但请尝试更改
$wrapper.on('paste', pasteImage);
到
$(window).on('paste', pasteImage);
无论如何,我修改了你当前的代码,这就是我的工作,虽然它可能没有完全触发你的设置,但是它将图像粘贴在:
(function() {
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
txtStyles = {
top: 100,
left: 200,
padding: 6,
fill: '#d6d6d6',
fontFamily: 'sans-serif',
fontSize: '24',
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
imgAttrs = {
left: 200,
top: 200,
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
introTxt = new fabric.Text('Paste images here', txtStyles),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
//Loop through files
for(var i=0;i<items.length;i++){
if (items[i].type.indexOf('image')== -1) continue;
var file = items[i],
type = items[i].type;
var imageData = file.getAsFile();
var URLobj = window.URL || window.webkitURL;
var img = new Image();
img.src = URLobj.createObjectURL(imageData);
fabric.Image.fromURL(img.src, function(img){
canvas.add(img);
});
}
},
//Canvas starter text
introCanvas = function() {
canvas.add(introTxt);
};
introCanvas();
$(window).on('paste', pasteImage);
})();