Convert any image to HTML5 canvas

Submitted by hemanth on Sun, 08/26/2012 - 13:14

Even before talking about the technicalities of converting an image to a canvas element, check out the demo!

DEMO input any image URL there and hit the convert button!

P.S : It also accepts data-uri!

The code :

function draw() {
        // Get the canvas element and set the dimensions. 
        var canvas = document.getElementById('canvas');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
 
       // Get a 2D context.
        var ctx = canvas.getContext('2d');
 
        // create new image object to use as pattern
        var img = new Image();
        img.src = document.getElementById('url').value;
        img.onload = function(){
            // Create pattern and don't repeat! 
           var ptrn = ctx.createPattern(img,'no-repeat');
           ctx.fillStyle = ptrn;
           ctx.fillRect(0,0,canvas.width,canvas.height);
 
        }
 }

The Magic Behind :

All the credits goes to createPattern()

nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);

Elobrating :

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Hope this was useful, anyway there are loads of fun with the canvas element, happy hacking!

Edit 0

After the interesting question by @pinkham in the comment section, from the page of MDN :

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Provided that you have a server hosting images along with appropriate Access-Control-Allow-Origin header, you will be able to save those images to localStorage as if they were served from your domain.

    var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here
 
   img.crossOrigin = "Anonymous";
 
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage( img, 0, 0 );
     localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
   }
 
   img.src = src;
   // make sure the load event fires for cached images too
   if ( img.complete || img.complete === undefined ) {
      img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
      img.src = src;
  }

P.S :

Share this