Fabric.js experiment
Updated based on @kangax's gist https://gist.github.com/1095042
and it works like a charm
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<input type="file" id="imgLoader">
<canvas id="c" width="300" height="300"></canvas>
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();
console.log(event.target.result);
imgObj.src = event.target.result;
console.log('src->', imgObj.src);
imgObj.onload = function () {
// start fabricJS stuff
alert('hi');
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]);
}