如何使用 Fabric.js 将图像上传到画布？

Posted 2023-03-24

【中文标题】如何使用 Fabric.js 将图像上传到画布？

【英文标题】：How to upload an image to a canvas with Fabric.js?

【发布时间】：2014-03-10 01:30:49

【问题描述】：

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

我无法让它工作。我的 html 是：

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

javascript 如下：

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

【问题讨论】：

刚刚通过一个工作示例找到了答案here

【参考方案1】：

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

【讨论】：

感谢此代码运行良好。但是当我连续尝试相同的图像上传时，第二次它没有上传

@NikunjChavda 要上传相同的图像，您需要清除 input[type="file"] 元素值。类似e.target.value = null;

【参考方案2】：

您可以通过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: 0,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;



Include it like this:

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

【参考方案3】：

这是一个老问题，这里的一些现有答案似乎已被破坏。这是一个工作示例，说明如何使用文件输入将图像添加到 Fabric.js 画布，然后将其缩放以适应画布。

此示例适用于当前版本的库。

var canvas = new fabric.Canvas('canvas');

document.getElementById("uploader").onchange = function(e) 
  var reader = new FileReader();
  reader.onload = function(e) 
    var image = new Image();
    image.src = e.target.result;
    image.onload = function() 
      var img = new fabric.Image(image);
      img.set(
        left: 100,
        top: 60
      );
      img.scaleToWidth(200);
      canvas.add(img).setActiveObject(img).renderAll();
    
  
  reader.readAsDataURL(e.target.files[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<input id="uploader" type="file"/>
<canvas id="canvas"   style="border:1px solid black"></canvas>

【参考方案4】：

 var canvas = new fabric.Canvas('main-canvas');
        canvas.selection = false;
        var imgElement = document.getElementById("img11");

        var imgInstance = new fabric.Image(imgElement, 
            angle: 0,
            position: 'absolute',
            opacity: 1,
            originX: 'left',
            originY:'top',
            meetOrSlice:'slice',

        );
        imgInstance.selectable = false;
        canvas.add(imgInstance);
        canvas.renderAll();