从电脑上传图像到Fabric.JS画布

Question

有没有 Fabric.JS 向导？我已经进行了充分的研究，但似乎找不到如何将图像添加到 fabric.JS 画布的解释。

用户流程： a) 用户从输入文件类型按钮上传图像。 b) 一旦他们从计算机中选择了图像，我希望将其放置到用户的画布中。

到目前为止，我已经将图像存储到一个表达式中，以下是我的代码：

    scope.setFile = function(element) {
        scope.currentFile = element.files[0];
        var reader = new FileReader();

        /**
         *
         */
        reader.onload = function(event) {
            // This stores the image to scope
            scope.imageSource = event.target.result;
            scope.$apply();

        };

        // when the file is read it triggers the onload event above.
        reader.readAsDataURL(element.files[0]);
    };

我的HTML/Angular：

            <label class="app-file-input button">
                <i class="icon-enter"></i>
                <input type="file"
                       id="trigger"
                       onchange="angular.element(this).scope().setFile(this)"
                       accept="image/*">
            </label>

如果你还没有猜到，我正在使用MEAN技术栈。即Mongoose、Express、Angular和Node。

变量imageSource是存储图像的位置。我已经阅读了这篇文章，其中提到了将图像压缩为结果并将其传递给fabric.Image对象的方法。有没有人做过类似的事情，并能够帮助我呢？

谢谢提前。

****更新**** 指令定义了canvas变量：

            var canvas = new fabric.Canvas(attrs.id, {
                isDrawingMode: true
            });

- Max Lynn

---

作用域 scope.imageSource 是否被填充了内容？用什么来填充？ - AndreaBogazzi

是的，我将其用作表达式放在图像标签上以确保它正常工作。但是我不确定如何将该图像放置在画布上。 - Max Lynn

Answer 1

使用 Fabric js 从计算机上传图像。

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

canvas{
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

- Varun Sharma

---

嘿，我尝试实现这段代码，但是当我在上传函数之外使用console.log(canvas.getObjects())时，出现了canvas.getObjects()的错误。它返回1个对象，但如果我在reader.onload = function (f) {内调用它，则返回2个对象。为什么会这样？ - naoval luthfi

Answer 2

一旦你有了一个完成的DataURL，你可以选择以下任意一种方式：

    reader.onload = function(event) {
        // This stores the image to scope
        fabric.Image.fromURL(event.target.result, function(img) {
          canvas.add(img);
        });
        scope.$apply();
    };

或者你在图像标签上放置一个onload事件，在其中执行以下操作：

  var img = new fabric.Image(your_img_element);
  canvas.add(img);

- AndreaBogazzi

---

需要将它转换为二进制对象才能放置在织物画布上吗？ - Max Lynn

如果它是一个 dataUrl 并且可以在图像元素的 src 属性中正常显示，那么您无需进行任何操作。fabric 可以处理它。 - AndreaBogazzi

好的，谢谢。我会试一下并回复你！ - Max Lynn

有一个小问题。我的画布是在指令中定义的（请查看问题中的更新），我正在指令中存储一张图片。想知道如何在控制器中定义或获取画布变量，您是否能提供帮助？ - Max Lynn

Answer 3

这是使用dataTransfer接口从桌面进行拖放的。

canvas.on('drop', function(event) {
    
    // prevent the file to open in new tab
    
    event.e.stopPropagation();
    event.e.stopImmediatePropagation();
    event.e.preventDefault();

    // Use DataTransfer interface to access the file(s)
    
    if(event.e.dataTransfer.files.length > 0){

        var files = event.e.dataTransfer.files;
        
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            
            if (f.type.match('image.*')) {            
                
                // Read the File objects in this FileList.
                
                var reader = new FileReader();
                
                // listener for the onload event
                
                reader.onload = function(evt) {
                    
                    // put image on canvas
                    
                    fabric.Image.fromURL(evt.target.result, function(obj) {
                        
                        obj.scaleToHeight(canvas.height);
        
                        obj.set('strokeWidth',0);
                        
                        canvas.add(obj);       
                    
                    });
                };
               
                // Read in the image file as a data URL.
               
                reader.readAsDataURL(f);
            }
        }
    }  
}); 

资源

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

- RafaSashi