从剪贴板粘贴图像到fabric.js画布？

Question

从剪贴板粘贴图像到fabric.js画布？

4

我正在尝试创建一个函数，将用户剪贴板中的图像粘贴到画布上作为新的fabric.Image()。我找到的任何搜索结果都描述了克隆已在画布上的对象或粘贴IText数据。这个SO问题与我所问的相关，但它已经4年了，顶部答案中的函数不起作用：如何使用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);

这里有一个示例，可以看到它的运行情况（或者说不运行）。这最终将成为Photoshop插件的一部分，所以我只需要担心它在Chrome中是否能正常工作。

- NikkiBdraws

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- simon · Accepted Answer

我无法触发您的粘贴事件处理程序，因为我不确定除非您将其变成可编辑div，否则div是否能本地接受粘贴事件，在您的情况下，我怀疑您不想这样做。

我最近在自己的应用程序中实现了这个功能，但我没有使用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);
})();

fiddlers: https://jsfiddle.net/c0kw5dbu/3/