之前解決一些瀏覽器不支援CSS濾鏡模糊圖片，用的方法是SVG模糊濾鏡，但用SVG模糊濾鏡，圖片大小不好控制，每次都是邊測試邊調整寬高

正好現在做的一個頁面的要求是，一張圖片，根據訪問者來顯示其狀態，沒有與此條動態互動的使用者看到的圖片是模糊的，點贊或評論後才可以見到不模糊的圖片，所以就用到CANVAS繪製圖片疊在圖片上，控制其顯示與隱藏即可

這個庫提供了3個函式：

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );    //用於將圖片模糊繪製到canvas

stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius );  //用於對Canvas矩形區域執行RGBA模糊

stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );     //用於對Canvas矩形區域執行RGB模糊，不考慮Alpha值

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel )
sourceImageID表示要模糊的圖片的id；
targetCanvasID表示要顯示模糊圖片的canvas元素的id;
radius表示模糊的半徑大小。不過，根據我的對比測試，radius好像與CSS中filter濾鏡的模糊值不是1:1匹配的，反倒是有些類似2:1. 也就是這裡的20px的半徑模糊近似於CSS中blur濾鏡值設定為10px;

改了下處理庫
var img = document.getElementById( imageID );
var w = img.naturalWidth;
var h = img.naturalHeight;
var canvas = document.getElementById( canvasID );
以下是改的部分
//canvas.style.width  = w + "px";
//canvas.style.height = h + "px";
//顯示圖片縮放情況下，使CANVAS與圖片顯示的一樣大

解決getImageData跨域問題：
此庫中用到的getImageData函式，這個函式包含著js跨域的問題。js跨域限制是不能獲取非同一域名下的資料的，（本地的位置是沒有域名的，url是非同一域名的），所以瀏覽器都認為你是跨域了，會報錯。

解決辦法：

本地位置的訪問地址用：localhost

url是非同一域名的，藉助後端技術：
<?php
$pic = 'http://avatar.csdn.net/D/5/3/1_qq_16494241.jpg';
$arr = getimagesize($pic);
$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));
?>
<img src="<?php echo $pic ?>" /> 

在HTML 5中，新增加了兩個用來判斷圖片的寬度和高度的屬性，分別為naturalWidth 和naturalHeight屬性，例子如下：

var rw = myimage.naturalWidth;// 真實圖片寬度 
var rh = myimage.naturalHeight;//真是圖片高度 

但有個前提是，必須在圖片完全下載到客戶端瀏覽器才能判斷，目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的，如果是不支援的版本瀏覽器，那可以用傳統方法判斷，如下：

var myimage = document.getElementById("myimage"); 
if (typeof myimage.naturalWidth == "undefined") { 
// IE 6/7/8 
var i = new Image(); 
i.src = myimage.src; 
var rw = i.width; 
var rh = i.height; 

} else { 
// HTML5 browsers 
var rw = myimage.naturalWidth; 
var rh = myimage.naturalHeight; 
}