如何使用Fabric.js将图像上传到canvas？
我想要创建一个过程，用户可以上传他们的图像然后在浏览器中使用Fabric.js在Canvas中使用一些按钮编辑它们-wich使用Fabric.js来添加一些效果。
我不能让它发挥作用。 我的HTML是：
Javascript如下：
var canvas = new fabric.Canvas('canvas'); canvas.setHeight(480); canvas.setWidth(640); $('#uploadedImg').change(function () { var imgData = $(this).files[0]; fabric.util.loadImage(imgData, function(img) { var oImg = new fabric.Image(img); oImg.scale(0.2).set({ left: 100, top: 100, }); canvas.add(oImg); }); });
document.getElementById('imgLoader').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event){ var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { var image = new fabric.Image(imgObj); image.set({ angle: 0, padding: 10, cornersize:10, height:110, width:110, }); canvas.centerObject(image); canvas.add(image); canvas.renderAll(); } } reader.readAsDataURL(e.target.files[0]); }
您可以通过结构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: 0,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; } Include it like this:
var canvas = new fabric.Canvas('main-canvas'); canvas.selection = false; var imgElement = document.getElementById("img11"); var imgInstance = new fabric.Image(imgElement, { angle: 0, position: 'absolute', opacity: 1, originX: 'left', originY:'top', meetOrSlice:'slice', }); imgInstance.selectable = false; canvas.add(imgInstance); canvas.renderAll();