将图像从用户计算机添加到画布 [英] Add image from user computer to canvas

问题描述

我正在使用一个网络应用程序，允许用户创建动态幻灯片。目前我有一个问题，无论如何从计算机的用户添加图像到画布。
我使用输入按钮从计算机获取文件，它吸引一个函数，谁将添加到画布上的图像。

i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas. I'm using a input button to get the file from the computer and it appeal a function who will add the image to the canvas.

到目前为止，我已经尝试了不同的方式来添加图像到画布以及这一个：动态添加图片到画布

So far i've tried different ways to add the image to the canvas as well as this one : Dynamically add image to canvas

但是显示的代码在我的情况下无效，因为它只是将图像绘制到画布上，但它不允许它是可拖动和可调整大小，就像Fabricsjs的Kitchensink.js演示。

But the code showing here doesnt work in my case, because it just draw the image into the canvas but it wont allow it to be draggable and resizable just like the Kitchensink.js demo from Fabricsjs.

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

I've also try to convert the image into Base64 and use the LoadJSON to convert it back but i encountered this error :

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引用我调用来添加图像的函数。

Sub's refering to the function i've called to add the image.

我也尝试过以下代码：

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 

想法，只实现了绘制图像，但没有添加到画布上。

I've cleary run out of ideas and only achieved to draw the image but not adding it to the canvas.

在一个我想要添加一个图像到我的Fabricjs画布具有相同的属性，无论可拖动为Kitchensink演示。
预先感谢您的帮助：）

All in one i'd like to add an image to my Fabricjs canvas with the same attributes regardless the draggable as the Kitchensink demo. Thanks in advance for your help :)

推荐答案

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

There is one basic mistake in your code, you are trying to add the image data to the src attribute of the fabric.Image object.

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

What you need to do, is to create an Image object with your result, and pass it to the fabric.Image object, like this:

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

我在这里做了一个工作示例：
http://jsfiddle.net/jaibuu/Vp6wa/

这篇关于将图像从用户计算机添加到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！