我正在开发一个Web应用程序,允许用户创建动态幻灯片。目前,无论如何从计算机用户添加图像到画布都存在问题。我使用输入按钮从计算机获取文件,并调用一个函数将图像添加到画布中。
到目前为止,我已经尝试了不同的方法将图像添加到画布中,包括这个:Dynamically add image to canvas。但是,这里显示的代码在我的情况下不起作用,因为它只是将图像绘制到画布上,而不允许它像Fabricsjs的Kitchensink.js演示那样可拖动和可调整大小。
我还尝试将图像转换为Base64并使用LoadJSON将其转换回来,但遇到了这个错误:
Sub是指我调用添加图片的函数。
我也尝试了这段代码:
我已经完全没有想法,只能绘制图像但无法将其添加到画布中。
总之,我希望像Kitchensink演示文稿一样,在我的Fabricjs画布上添加一个具有相同属性的图像,无论是否可拖动。
感谢您的帮助 :)
到目前为止,我已经尝试了不同的方法将图像添加到画布中,包括这个: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画布上添加一个具有相同属性的图像,无论是否可拖动。
感谢您的帮助 :)
**img**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**img**);
而不是**image**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**image**);
吗? - Kevin Heidt