tutorial examples docs javascript jquery html5 html5-canvas fabricjs

javascript - examples - fabricjs tutorial



¿Cómo subir una imagen a un lienzo con Fabric.js? (3)

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]); }

Quiero que se cree un proceso donde los usuarios puedan cargar sus imágenes y luego editarlas en el navegador en un Canvas con Fabric.js usando algunos botones -wich usa Fabric.js para agregar algunos efectos-.

No puedo hacer que funcione. Mi HTML es:

<form id="uploadImg" runat="server"> <input type="file" id="uploadedImg"/> </form> <canvas id="canvas"></canvas>

El Javascript es el siguiente:

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); }); });


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();


Puede cargar imágenes múltiples por js de tela y también se puede arrastrar de un lugar a otro en el lienzo.

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="450" height="450"></canvas>