It seems like a pretty straightforward task, but I'm struggling to make it work:
// This is just for demonstration purposes, how can I access the canvas from within the rotate method?
_imagePreview = function()
{
var canvas = '';
return {
load: function() {
fileReader.onload = function(e) {
image = new Image();
image.onload = function() {
// The value should be an empty string here
console.log(this.canvas);
canvas = $('#myCanvas')[0];
// Now, this should log the Canvas object
console.log(this.canvas);
return true;
}
}
image.src = e.target.result;
}
fileReader.readAsDataURL(file);
},
rotate: function() {
// At this point, the value of canvas is undefined which is not what I expected
console.log(canvas);
}
}
I am invoking _imagePreview.load() first, followed by _imagePreview.rotate(), however, I am not able to retrieve the correct value for canvas.
The rotate method gets triggered by a click event after the user selects a file and it gets rendered into the canvas. Hence, rotate will always execute after load. Here's an example:
$("#rotate-clockwise").click(function() {
_imagePreview().rotate('+', 90);
});
$("#rotate-counter-clockwise").click(function() {
_imagePreview().rotate('-', 90);
});