Javascript 是否将图像从剪贴板粘贴到fabric.js画布？

我正在尝试创建一个函数，该函数将图像从用户的剪贴板粘贴到画布上，作为

new fabric.image（）

。我找到的任何搜索结果要么描述克隆画布上已有的对象，要么描述粘贴IText数据。这个问题与我要问的有关，但它已经4年了，上面答案中的函数不起作用：

这是我目前正在尝试使用的代码。我正在尝试设置一个粘贴函数，稍后可以调用：

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);

var$wrapper=$（'#content'），
canvas=新结构。canvas（'canvas'{
宽度：400，
身高：550
}),
粘贴图像=函数（e）{
var items=e.originalEvent.clipboardData.items；
e、 预防默认值（）；
e、 停止传播（）；
//Fabric.js图像函数
函数canvasImage（url）{
var img=newfabric.Image（url）；
img.scale（0.75）.center（）.setCoords（）；
canvas.add（img.renderAll（）；
}
//循环浏览文件
对于（var i=0；i我无法让粘贴事件处理程序触发，因为我不确定div是否可以本机获取过去的事件，除非您将其设置为contenteditable div，在您的用例中，我怀疑您是否希望这样做

我最近在自己的一个应用程序中实现了这一点，但我没有使用fabric，只使用原生canvas和js

您将不得不重新编写代码，但请尝试更改

$wrapper.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);
})();

（函数（）{
var$wrapper=$（“#content”），
canvas=新结构。canvas（'canvas'{
宽度：400，
身高：550
}),
txtStyles={
前100名，
左:200,，
填充：6，
填写：“#D6”，
fontFamily:'无衬线'，
字体大小：“24”，
原文：'中心'，
原文：“中心”，
边框颜色：“#d6”，
角落颜色：“#D6”，
尺寸：5，
cornerStyle:“圆形”，
透明角：错误，
lockUniScaling：正确
},
imgAttrs={
左:200,，
前200名，
原文：'中心'，
原文：“中心”，
边框颜色：“#d6”，
角落颜色：“#D6”，
尺寸：5，
cornerStyle:“圆形”，
透明角：错误，
lockUniScaling：正确
},
introTxt=new fabric.Text（'在此处粘贴图像'，txtStyles），
粘贴图像=函数（e）{
var items=e.originalEvent.clipboardData.items；
e、 预防默认值（）；
e、 停止传播（）；
//循环浏览文件
对于（var i=0；我不会放两个答案，你的旧答案，然后更新它。旧答案是高度相关的，只是一个子答案。如果OP希望使div内容可编辑，那么这个答案将不可行，这就是为什么我做了两个不同答案的原因。没有必要，把它放在一个答案中。我复制了另一个答案并预先准备好，因为它是高度相关的。还有@gesturepoke我做了我不认为imgAttrs正在被应用。你可能需要进一步修改它，因为我不知道fabric lib的工作原理如何，但这肯定会为你指明某种方向。
(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);
})();