html5截图教程,JavaScript+html5canvas实现本地截图教程.pdf

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 / (