CANVAS实现图片模糊（处理库StackBlur.js）

之前解决一些浏览器不支持CSS滤镜模糊图片，用的方法是SVG模糊滤镜，但用SVG模糊滤镜，图片大小不好控制，每次都是边测试边调整宽高

正好现在做的一个页面的要求是，一张图片，根据访问者来显示其状态，没有与此条动态交互的用户看到的图片是模糊的，点赞或评论后才可以见到不模糊的图片，所以就用到CANVAS绘制图片叠在图片上，控制其显示与隐藏即可

CANVAS模糊用到了处理库StackBlur.js

这个库提供了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;
blurAlphaChannel为布尔属性，表示aplha透明通道是否要模糊，true表示要模糊。

改了下处理库
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与图片显示的一样大
canvas.style.width  = img.width + 'px';
canvas.style.height = img.height + 'px';

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