将图像从计算机上载到Fabric.JS Canvas [英] Uploading an image from computer to Fabric.JS Canvas

问题描述

那里有Fabric.JS向导吗？

我做了公平的研究，我似乎无法找到关于如何将图像添加到fabric.JS画布的解释。

用户旅程：

a）用户从输入文件类型按钮上传图像。
b）一旦他们从他们的计算机中选择了一个图像，我就想把它放到用户画布上。

到目前为止，我必须存储将图像转换为表达式，这是我的代码：

  scope.setFile = function（element）{
范围。 currentFile = element.files [0]; 
 var reader = new FileReader（）; 
 
 / ** 
 * 
 * / 
 reader.onload = function（event）{
 //这将图像存储到范围
 scope.imageSource = event.target.result; 
范围。$ apply（）; 
 
}; 
 
 //当读取文件时，它会触发上面的onload事件。 
 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 = 图像/ * > 
< / label> 
  

如果你还没有猜到我正在使用MEAN堆栈。猫鼬，快速，角度和节点。

范围imageSource是图像存储的内容。我阅读此内容

它讨论了如何用我的结果将图像推送到Image对象，然后将它传递给fabric.Image对象。有没有人做过类似的事情，他们可以帮助我？

提前致谢

**** UPDATE ****
指令定义画布变量：

  var canvas = new fabric.Canvas（attrs.id，{
 isDrawingMode：true 
 }）; 
  

解决方案

使用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 =fileid =file>< br />< canvas id =canvaswidth =450height =450>< / canvas>

Are there any Fabric.JS Wizards out there?

I've done my fair research and I can't seem to find much of an explanation on how to add an image to the fabric.JS canvas.

User Journey:

a) User uploads an image from an input file type button. b) As soon as they have selected an image from their computer I want to place it into the users canvas.

So far I've got to storing the image into an expression, this is my code below:

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

My 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>

If you haven't guessed yet I am using a MEAN stack. Mongoose, Express, Angular and Node.

The scope imageSource is what the image is store in. I've read this SO

and it talks about pushing the image to the Image object with my result, and then pass it to the fabric.Image object. Has anyone done a similar thing that they can help me with?

Thanks in advance

**** UPDATE **** Directive defines the canvas variable:

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

解决方案

Upload image from computer with 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>

这篇关于将图像从计算机上载到Fabric.JS Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！