JavaScript+html5 canvas实实现现本本地地截截图图教教程程
最近有时间了解了下html5的各A PI，发现新浪微博的头像设置是使用canvas实现截图的， 之前段时间了解了下html5的File A P
I使用File A PI 之FileReader实现文件上传 《《JavaScript File A PI文文件件上上传传预预览览》》，，更 觉得html5好玩了，想着也试试写写这
功能权当学习canvas吧。
下面奉上我自己写的一个demo ，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^
功能实现步奏：
一一、、获获取取文文件件，，读读取取文文件件并并生生成成url
二二、、根根据据容容器器的的大大小小使使用用canvas绘绘制制图图片片
三三、、使使用用canvas绘绘制制遮遮罩罩层层
四四、、使使用用canvas绘绘制制裁裁剪剪后后的的图图片片
五五、、拖拖动动裁裁剪剪框框，，重重新新裁裁剪剪图图片片
PS ：因为是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留意this对象喔
第第一一步步：：获获取取文文件件，，读读取取文文件件并并生生成成url
在这里我是使用html5里面的file api处理本地文件上传的，因为这样可以不需要把图片上传到服务器，再由服务器返回图片地址
来做预览，详细请看：使用File A PI 之FileReader实现文件上传
document.getElementById('post_file').onchange = function() {
var fileList = this.files 0];
var oFReader = new FileReader();
oFReader.readAsDataURL(fileList);
oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
};
}第第二二步步：：根根据据容容器器的的大大小小使使用用canvas绘绘制制图图片片
在上一步使用File A PI的FileReader 已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么
不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如
果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这
样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。
这里稍微要注意下canvas的drawImage方法。
paintImage: function(url) {
var t = this;
var createCanvas = t.getImage.getContext("2d");
var img = new Image();
img.src = url;
img.onload = function(){//等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
//如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例
缩放
//t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py
：绘制后图片的Y轴
if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
t.imgWidth = img.width;
t.imgHeight = img.height;
} else {
var pWidth = img.width / (
