megan-ta / image-show

基于canvas实现图片上传/预览/裁剪的demo

image-show

基于canvas实现图片上传/预览/裁剪的demo

上传图片后台测试时候基于nodejs的express框架

启动步骤：

1. 安装依赖

npm install

1. 切换到dev目录下

node app.js

npm run dev

实现思路：

1. 利用原生的input标签的file类型调用本地图片上传；

2. 监听input的change事件，能实时知道用户是否选中图片；

3. 新建一个formData对象，以键值对的形式存放file对象，demo中以image作为键名；

4. 新建一个fileReader对象，将读取到的file对象转成base64编码的形式；

5. 监听fileReader的onload事件，同时新建一个image对象，在这个事件的回调函数中，将第四步中的编码后的图片地址作为图片引用路径；

6. 监听创建的image的onload事件，利用canvas的drawImage方法，将图片内容以canvas的形式展示在浏览器上；

7. 裁剪的思路 利用监听鼠标的mousedown和mousemove和mouseup事件，主要是在鼠标移动的事件中，一边清除画布内容的同时，利用canvas的strokeRect方法模拟做出一个矩形裁剪框，getImageData以及putImageData方法实时同步选中区域的x，y坐标以及选中区域宽高可以实现裁剪选区域与预览区域实时同步；

8. 抬起鼠标完成预览图片绘制；

9. 最终利用原生ajax实现form-data类型的上传;