untained image loader

by Darby Rathbone

HTML

<script src="http://evanw.github.io/glfx.js/glfx.js"></script>
<img id="my-image" src="http://bigbackground.com/wp-content/uploads/2013/05/baby-wolf-backgrounds.jpg" style="position:absolute;top:500px;"></img>
<script src="http://evanw.github.io/glfx.js/glfx.js"/>

CSS

canvas {
    
    border: 1px solid black;
}

JavaScript

function loadImage (url, callback){
    var xhr = new XMLHttpRequest();
xhr.open("GET", url, true,true);
xhr.responseType = "blob";
    xhr.origin = url;
xhr.onreadystatechange = function () {
  if (this.readyState == this.DONE) {
    var blob = this.response;
    var image = new Image();
    image.addEventListener("load", function (evt) {
      URL.revokeObjectURL(evt.target.src);
        
    });
      image.onload = function() {
          callback(image);
      };
    image.src = URL.createObjectURL(blob);
      
  }
};
    xhr.send();
}
var fun = function(image){
          can.draw(can.texture(image)).edgeWork(5);
          can.update();   
    canvas.width = can.width;
    canvas.height = can.height;
    ctx.drawImage(can,0,0);
    
    document.getElementById("my-image");
    var imgdata =ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imgdata.data;
ctx.drawImage(image,0,0);
    var id = ctx.getImageData(0,0,canvas.width,canvas.height);
    var d = id.data;
    
    var i =0;
    do{
        d[i+3] = 255-(data[i]);
        i+=4;
    }while(i<data.length);
    ctx.putImageData(id,0,0);

    
};

//loadImage("http://4.bp.blogspot.com/_Afm6-TcZ7Ho/S67FnPJD0_I/AAAAAAAAC6I/giTT8ePty5E/s1600/bunny.jpg",fun);
loadImage("http://bigbackground.com/wp-content/uploads/2013/05/baby-wolf-backgrounds.jpg",fun);
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var can = fx.canvas();document.body.appendChild(can);
can.style.position = 'absolute';
can.style.top = "1000px";