如何使用Fabric.js将图像上传到画布？ [英] How to upload an image to a canvas with Fabric.js?

问题描述

我希望创建一个用户可以上传图片的过程，然后在使用Fabric.js的Canvas中使用一些按钮在浏览器中编辑它们 - 使用Fabric.js添加一些效果。

I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons -wich uses Fabric.js to add some effects-.

我无法使其发挥作用。我的HTML是：

I can't make it work. My HTML is:

<form id="uploadImg" runat="server">
  <input type="file" id="uploadedImg"/>
</form>
<canvas id="canvas"></canvas>

Javascript如下：

The Javascript is the following:

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(480);
canvas.setWidth(640);

$('#uploadedImg').change(function () {
    var imgData = $(this).files[0];
    fabric.util.loadImage(imgData, function(img) {
        var oImg = new fabric.Image(img);
        oImg.scale(0.2).set({
            left: 100,
            top: 100,
        });
    canvas.add(oImg);
    });
}); 

推荐答案

document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
  reader.onload = function (event){
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function () {
      var image = new fabric.Image(imgObj);
      image.set({
            angle: 0,
            padding: 10,
            cornersize:10,
            height:110,
            width:110,
      });
      canvas.centerObject(image);
      canvas.add(image);
      canvas.renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}

这篇关于如何使用Fabric.js将图像上传到画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！