标签：
作为一个前端，想必对HTML5都不陌生，特别是移动端，如今已经比较火了，捞金量远胜于PC端，与其说HTML5是一项Web新时代革命性的技术，不如说其是现代化Web应用的新理念；一方面结合JavaScript，前端的羽翼更加丰满；另一方面，跨终端将Web应用推向了一个新的高度；你看到的视觉将更加高端、大气、炫酷；你浏览时的交互体验将更加人性化；你的设备消耗大大降低，运行更流畅；总之，你会惊叹，同时你会很舒服！而这一切都是基于HTML5的！
作为一个小前端，才疏学浅，个人小站（花满楼：http://www.famanoder.com）HTML5实验室板块，将逐步整理一些HTML5小应用和个人心得，愚论拙见，不才献丑！这里没有知识点的详解，没有一个个Demo供君Copy，这里你看到的都是一个整体，只是这个整体是由HTML5的一些知识点汇聚而成，因为我认为所有的Demo都不算是程序！
HTML5最吸引人的地方之一必然有Canvas，他提供了操作网页画布的一系列接口，你可以直接在html上进行图形操作，并且可以控制区域内的每一个像素点！比如：生成缩略图、打马赛克、调整图像大小、甚至实现类似PS的滤镜等。精彩无限，由你发现！
废话不多说了。首先需要把图片弄上去，在这里我采用的是HTML5的file API直接读取本地图片然后将其绘制到画布上；造了一个小轮子HOOC.js（详细代码并不复杂，HTML5实验室上线时有兴趣可以指教下），由此来实例化一个Canvas；
var hooc=new HOOC({
id:’canvas’,
width:500,
height:300
});
通过<input type=”file” id=”ifile” name=”ifile”/>的change事件拿到file对象（暂时不考虑多文件）；
document.getElementById(‘ifile’).onchange=function(){
hooc. onfile(this.files[0],function(file){
//现在file里包含了你读取的图片的相关信息
//file={
//preimg:…,
//name:…,
//size:….,
//type:….,
//base64:….,
//width:…..,
//height:…..
//}
//现在来将其绘制到画布上吧
hooc.context2D(function(cx,cn){
//cx为2dcontext对象
//cn为canvas对象
cx.clearRect(0,0,cn.width,cn.height);
cx.drawImage(file.preimg,0,0,file.width,file.height);
//OK,图片这样就绘制上去了
//然后你可以对其进行其他操作了，比如简单的滤镜……
//好吧，现在你还需要将你处理后的图片保存下来
download.onclick=function(){
hooc. saveAsImage(file.type,file.name);
}
});
});
}
关于canvas保存为图片的方法toDataURL();在这里没有考虑IE9及以下低级浏览器的兼容，虽然有google的excanvas.js，但其实大家也清楚，只能解决部分兼容问题，大家不要太天真了，还有就是保存URLdata时IE9会报字符太长限制错误，所以这里的下载到本地，采用HTML5的下载方式a.download；并通过模拟点击事件来及时触发，直接调用就OK，不受DOM节点类型限制；部分代码如下：
saveAsImage:function(type,name){
if(navigator.userAgent.toLowerCase().indexOf(‘msie‘)!=-1){
//BSIE
return false;
}
var dataUrl=this.canvas.toDataURL(‘image/octet-stream‘);
dataUrl=dataUrl.replace(‘image/png‘,‘image/‘+type+‘‘);
var name=name.toLowerCase().lastIndexOf(‘.‘+type.toLowerCase()+‘‘)!=-1?name:(name+‘.‘+type);
var a=document.createElement(‘a‘);
a.href=dataUrl;
a.download=name;
var event=document.createEvent(‘MouseEvents‘);
event.initMouseEvent(‘click‘,true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null)
a.dispatchEvent(event);
}
如大家所见，HTML5实验室的内容将不考虑低级IE的兼容性，全都采用HTML5相关的API来实现，我只想说，确实不错，遇见绝不错过！
HOOC.js还将陆续整理力所能及的基于Canvas处理图像的更多方法，实现一个miniPS，一方面作为对canvas学习的总结，另一方面，可以协助自己处理图片；如果有幸与君共同探讨，或对读者有所裨益，倍感荣幸；小弟不才，敬请期待！
标签：
原文地址：http://www.cnblogs.com/hufeng/p/4980265.html
