将用户计算机中的图像添加到画布 [英] 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/

I made a working example here: http://jsfiddle.net/jaibuu/Vp6wa/

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