將任意圖像轉成 HTML5 Canvas

在開始講解技術細節之前請先看這個DEMO，輸入任意的圖像URL，然后點擊 Img2Canvas 按鈕

BTW: 同樣接受 data-uri 格式數據。

代碼：

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);

        }
 }

應用邏輯：

關鍵的地方在于 createPattern()

nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

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;
 }

原文