javascript - examples - fabricjs tutorial

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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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>