将图像从用户计算机添加到canvas
我正在开发一个允许用户创建动态幻灯片的Web应用程序。 目前，无论如何将图像从计算机用户添加到canvas，我都遇到了问题。 我正在使用输入按钮从计算机获取文件，它吸引了将图像添加到canvas的function。
到目前为止，我已经尝试了不同的方法将图像添加到canvas以及这一个： 动态添加图像到canvas
但是这里显示的代码在我的情况下不起作用，因为它只是将图像绘制到canvas中，但它不允许它可拖动和可resize，就像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
我已经完成了一些想法，只能绘制图像而不是将它添加到canvas中。
我想在我的Fabricjscanvas上添加一个具有相同属性的图像，无论可拖动的是Kitchensink演示。 在此先感谢您的帮助 ：）
您的代码中存在一个基本错误，您正在尝试将图像数据添加到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/
通过Fabric js从计算机上传canvas。
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; }