在开始讲解技术细节之前请先看这个演示程序，输入任意的图像URL，然后点击 Img2Canvas 按钮
BTW: 同样接受 data-uri 格式数据。
代码：
01 |
function draw() { |
02 |
// Get the canvas element and set the dimensions. |
03 |
var canvas = document.getElementById('canvas'); |
04 |
canvas.height = window.innerHeight; |
05 |
canvas.width = window.innerWidth; |
06 |
07 |
// Get a 2D context. |
08 |
var ctx = canvas.getContext('2d'); |
09 |
10 |
// create new image object to use as pattern |
11 |
var img = new Image(); |
12 |
img.src = document.getElementById('url').value; |
13 |
img.onload = function(){ |
14 |
// Create pattern and don't repeat! |
15 |
var ptrn = ctx.createPattern(img,'no-repeat'); |
16 |
ctx.fillStyle = ptrn; |
17 |
ctx.fillRect(0,0,canvas.width,canvas.height); |
18 |
19 |
} |
20 |
} |
应用逻辑：
关键的地方在于 createPattern()
nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
01 |
var img = new Image, |
02 |
canvas = document.createElement("canvas"), |
03 |
ctx = canvas.getContext("2d"), |
04 |
src = "http://example.com/image"; // insert image url here |
05 |
06 |
img.crossOrigin = "Anonymous"; |
07 |
08 |
img.onload = function() { |
09 |
canvas.width = img.width; |
10 |
canvas.height = img.height; |
11 |
ctx.drawImage( img, 0, 0 ); |
12 |
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); |
13 |
} |
14 |
15 |
img.src = src; |
16 |
// make sure the load event fires for cached images too |
17 |
if ( img.complete || img.complete === undefined ) { |
18 |
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; |
19 |
img.src = src; |
20 |
} |
英文原文http://www.h3manth.com/content/convert-any-image-html5-canvas，OSCHINA原创翻译