将图像从计算机上传到 Fabric.JS Canvas

Posted 2023-03-25

【中文标题】将图像从计算机上传到 Fabric.JS Canvas

【英文标题】：Uploading an image from computer to Fabric.JS Canvas

【发布时间】：2016-04-03 11:23:00

【问题描述】：

那里有任何 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 是存储图像的位置。我有 read this SO

它谈到将图像与我的结果一起推送到 Image 对象，然后将其传递给 fabric.Image 对象。有没有人做过类似的事情可以帮助我？

提前致谢

**** 更新 **** 指令定义了画布变量：

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

【问题讨论】：

scope.imageSource 是否填充了某些内容？用什么？

是的，所以我用它作为表达式来放置图像标签以确保其正常工作。但是我不确定如何拍摄该图像并将其放置在画布上

【参考方案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"  ></canvas>

【讨论】：

嘿，我尝试实现此代码，但我在 canvas.getObjects() 上遇到错误，当我在上传函数之外 console.log(canvas.getObjects()) 时，它返回 1 个对象，但如果我在 reader.onload = function (f) 内调用它，它会返回 2 个对象，这是为什么呢？

【参考方案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);

【讨论】：

不需要转成二进制对象吗？放在布艺画布上？

如果是在图片元素的src属性中显示ok的dataUrl，则不需要做任何事情。面料可以处理。

好的，谢谢，我会试一试，然后回复你！

有点问题。我的画布是在指令中定义的。 （查看有问题的更新）并且我将图像存储在指令中。想知道您是否知道我如何在控制器中定义或获取 canvas 变量？