html 图像处理 灰度图和浮雕图类PS

    html5 的canvas还有一些很酷炫的效果，接下来讲的是canvas对像素的处理，虽然略有些复杂，但实现出的效果，还是很赞的~~。

   为了不让大家失望，先强调一句：下列效果需调用getImageData()，而这个方法会被某些浏览器阻止，如chrome。原因是：

   受js同源策略影响，js跨域限制是不能获取非同一域名下的数据的，以下代码是在本地上测试的， 而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。

解决方法：可以用其他的浏览器。或者可以将图片写入PHP，具体可参照 解决getImageData跨域

    第一个效果：灰度图

    插入html如下：

 <img id="img1" src="baijuyi.jpg"  />
 <input id="btnGO" type="button" value="转成灰度图"/><br />
 <canvas id="c1" height="200" width="320"></canvas><br />

<script>
 function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()