HTML Canvas - resize/drag uploaded image

Question

I am a new user and cannot comment on this post: dragging and resizing an image on html5 canvas regarding drag and drop/resize image with anchors...

could someone please clarify how to apply the resize/drag/anchors to an uploaded image rather than a pre-loaded image please?

I have had a go but its killing me..

uploader html:
<input type="file" id="imageLoader" name="imageLoader" />

uploader js:
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, 200, 140);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

fiddle

Answer 1

your code is written to handle the global var img.
When you load a new image, a new local img var is created, which you only draw on the context.
What you need is to have the new image replace the old one.
So just change, in your file loader :

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        img = new Image();               // not 'var img=...'
        img.onload = function () {
            draw(true,true);             // just update your app
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

it workd, as you can see here :
http://jsfiddle.net/LAS8L/108/