从用户电脑添加图像到画布

Question

我正在开发一个Web应用程序，允许用户创建动态幻灯片。目前，无论如何从计算机用户添加图像到画布都存在问题。我使用输入按钮从计算机获取文件，并调用一个函数将图像添加到画布中。

到目前为止，我已经尝试了不同的方法将图像添加到画布中，包括这个：Dynamically add image to canvas。但是，这里显示的代码在我的情况下不起作用，因为它只是将图像绘制到画布上，而不允许它像Fabricsjs的Kitchensink.js演示那样可拖动和可调整大小。

我还尝试将图像转换为Base64并使用LoadJSON将其转换回来，但遇到了这个错误：

Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089
enlivenObjects fabric.js:2089
fabric.util.object.extend._enlivenObjects fabric.js:9025
fabric.util.object.extend.loadFromJSON fabric.js:8953
sub

Sub是指我调用添加图片的函数。

我也尝试了这段代码：

document.getElementById('imgLoader').onchange = function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new fabric.Image();
img.onload = function(){
img.set({
    left : 250,
    top : 250,
    angle : 20,
      padding: 10,
      cornersize: 10
    });
    image.scale(getRandomNum(0.1, 0.25)).setCoords();
    canvas.add(image);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

捕获这些错误：

Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358
fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358
fabric.Image.fabric.util.createClass._initConfig fabric.js:14334
fabric.Image.fabric.util.createClass.setElement fabric.js:14127
fabric.Image.fabric.util.createClass._initElement fabric.js:14322
fabric.Image.fabric.util.createClass.initialize fabric.js:14097
(anonymous function) fabric.js:2679
klass fabric.js:2728
reader.onload diapo.js:746 

我已经完全没有想法，只能绘制图像但无法将其添加到画布中。

总之，我希望像Kitchensink演示文稿一样，在我的Fabricjs画布上添加一个具有相同属性的图像，无论是否可拖动。

感谢您的帮助 :)

- SnoWhite

---

难道不应该是 **img**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**img**); 而不是 **image**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**image**); 吗？ - Kevin Heidt

Answer 1

你的代码中存在一个基本错误，你试图将图像数据添加到fabric.Image对象的src属性中。

你需要做的是，使用你的结果创建一个Image对象，并将其传递给fabric.Image对象，像这样：

var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
  var image = new fabric.Image(imgObj);
}

我在这里制作了一个可用的示例： http://jsfiddle.net/jaibuu/Vp6wa/

- Jaibuu

---

刚刚发现了这个解决方案。它非常有效，但是我需要一些额外的功能。你看，我需要能够添加所选图像的副本。上面的代码只允许我选择一个图像文件实例。有没有办法允许多次使用同一图像？ - Mr Pablo

在这个例子中，一个图像被创建并存储为变量imgObj，你可以重复使用它，并且可以随意创建新的Fabric对象；）。无论如何，最好还是提出一个新的更具体的问题。 - Jaibuu

@Jaibuu，你忘记了关闭imgObj.onload函数的括号。 - nicholaswmin

谢谢 @Jaibuu，你让我的一天！ :) - Amit Kumar Khare

要使其工作，只需删除 all.js 并包含 link fabric.min.js。All.js 链接已不存在。 - Gislef

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

- Varun Sharma