Functions stop working after image is uploaded into canvas

Question

So I upload an image file and draw it to canvas but this stops the cropping function on the page to not work.

The upload code looks like this:

HTML:

<input type='file' id="fileUpload" />

JavaScript:

function el(id){return document.getElementById(id);} // Get elem by ID

var canvas  = el("canvas");
var context = canvas.getContext("2d");

function readImage() {
if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
       var img = new Image();
       img.addEventListener("load", function() {
         context.drawImage(img, 0, 0);
       });
       img.src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

el("fileUpload").addEventListener("change", readImage, false);

I am cropping images using this solution.

Currently I have replaced the

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/houses1.jpg";

with the alternative upload script but this seems to stop the cropping script.

Are there any solutions to this?

Functions stop working after image is uploaded into canvas

0 Answers0