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 docum