Uploading an image from computer to Fabric.JS 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
            });

回答1:

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>

回答2:

once you have a dataURL done, you can do either:

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

Or you put on your image tag an onload event where you do:

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

来源：https://stackoverflow.com/questions/34513367/uploading-an-image-from-computer-to-fabric-js-canvas

标签

javascript

angularjs

node.js

canvas

fabricjs