将图像从用户计算机添加到画布

Question

我正在开发一个允许用户创建动态幻灯片的Web应用程序.目前,无论如何将图像从计算机用户添加到画布,我都遇到了问题.我正在使用输入按钮从计算机获取文件,它吸引了将图像添加到画布的功能.

到目前为止,我已经尝试了不同的方法将图像添加到画布以及这一个:动态添加图像到画布

但是这里显示的代码在我的情况下不起作用,因为它只是将图像绘制到画布中,但它不允许它可拖动和调整大小,就像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 

我已经完成了想法,只能绘制图像而不是将其添加到画布中.

我想将一个图像添加到我的Fabricjs画布上,使用相同的属性,无论可拖动的是Kitchensink演示.在此先感谢您的帮助 :)

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/