jCanvas: drawImage draggable
HTML
<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<b>Image string:</b><br>
<div class="base64" style='color: white; background-color:black;'>
The base64 image string will be appended here
</div>
<br>
<p><button id="myButton" type="button" disabled>Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
Canvas<canvas id="myCanvas" width="1000" height="1000"/>
JavaScript
$(function(){
$('#fileInput').on('change', function() {
$.each(this.files, function() {
var image = new Image();
image.src = window.URL.createObjectURL(this);
image.onload = function() {
$("canvas").drawImage({
layer: true, //don't forget to include this
source: image,
x: 50, y: 50,
width: 1000,
height: 1000,
fromCenter: false
}).drawLayers(); //and draw the layer
$('#myButton').prop('disabled', false);
};
});
});
$('#myButton').click(function() {
$('.base64').html($("canvas").getCanvasImage());
});
});