用canvas给图片抽帧
冰冰老婆1:1头像镇楼：
受一段视频启发，具体视频在哪找不到了。但是总体就是把一张照片横向裁剪成一条一条，间隔一条抽去一条，再拼接起来还是能看到轮廓，然后纵向执行相同的操作，重复多次，最后照片已经只剩很小的一块了，但是照片的内容却还是依稀可以看到。
canvas有操控像素的能力，所以想了想这种功能使用canvas应该是能实现的。说干就干。
下面就是间隔2,4,8,10个像素抽取像素以后的效果了：
怎么样，再怎么模糊也是认得出来的吧。
不想看具体原理的直接运行一下就可以了：代码片段
1.图片加载
- 这里给了一个input表单用来接收图片，当图片上传成功以后，将其file数据通过
FileReader对象读取为base64格式的图片数据，将这个base64的数据设置为一个Image对象的src属性。 - 在img的
onload监听事件中，将img图像绘制到一个display: none的canvas画布上，然后再通过canvas的getImageData()方法获取到这个canvas画布上所有的像素点数据。 - 把所有的像素点数据拆分成一行一行的保存每行像素点的rgba数据的二维数组。
2.抽帧函数
- 点击按钮，先获取需要间隔多少个像素抽取像素
- 由于像素是个二维数组，外层数组的长度就是图片的高度，内层数组的长度都是一致的就是图片的宽度
- 先抽横向的像素，再抽纵向的像素。
- 抽完像素以后的数组使用
fillRect()方法一个像素一个像素的绘制就是抽完像素的图片了。
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
