在组合fabric.js和jQuery时,将图像拖放到画布不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在组合fabric.js和jQuery时,将图像拖放到画布不起作用相关的知识,希望对你有一定的参考价值。

我正在尝试设置fabric.js画布,以便用户可以将图像文件从系统拖放到画布上。在寻找一种方法时,我找到了this pen,它可以正常工作,但我也使用jQuery,我喜欢在文档的开头创建我的主变量/函数,并在以后根据需要调用它们。

当我重新组织代码以匹配我的设置时,drop函数停止工作。 Here's a penor 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时,将图像拖放到画布不起作用的主要内容,如果未能解决你的问题,请参考以下文章

使用 Fabric 拖放在 Angular 中不起作用

Fabric.js:裁剪图像后的选择框

Fabric.js 图像点击和动画外部添加功能

fabric.js:如何制作带有描边阴影等的椭圆形图像?

Fabric.js 拖放元素进画布

如何使用 Fabric.js 将图像上传到画布?