Javascript 如何使用Fabric.js将多个图像从本地磁盘添加到画布?
我正在使用Javascript 如何使用Fabric.js将多个图像从本地磁盘添加到画布?,javascript,html,html5-canvas,fabricjs,Javascript,Html,Html5 Canvas,Fabricjs,我正在使用Fabric.js在HTML5画布中创建一个图像拼贴应用程序。我希望用户可以将文件拖放到“文件拖放区”,也可以从本地磁盘“选择文件”。请帮助我实现这一点 我正在使用此代码添加多个图像。现在,我想将本地磁盘上的图像添加到画布上 //Image 1 fabric.Image.fromURL('/3.jpg', function (img) { var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9
Fabric.js
在HTML5画布中创建一个图像拼贴应用程序。我希望用户可以将文件拖放到“文件拖放区”,也可以从本地磁盘“选择文件”。请帮助我实现这一点
我正在使用此代码添加多个图像。现在,我想将本地磁盘上的图像添加到画布上
//Image 1
fabric.Image.fromURL('/3.jpg', function (img) {
var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
//Image 2
fabric.Image.fromURL('/bokeh.jpg', function (img) {
var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
嘿,我有拖放和选择文件的解决方案,但不是在一个答案中,实际上我有两个不同的解决方案 拖放: 选择文件:
<input type="file" id="imgLoader">
<canvas id="c" width="300" height="300"></canvas>
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"> </script>
<script type="text/javascript>
canvas = new fabric.Canvas('c');
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) { console.log('fdsf');
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var image = new fabric.Image(imgObj);
image.set({
left: 250,
top: 250,
angle: 20,
padding: 10,
cornersize: 10
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.add(image);
// end fabricJS stuff
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
让我们看看你先尝试了什么。Stackoverflow上有很多资源已经解释了如何处理文件上传。@RayNicholus请查看代码。