图片上传，裁剪项目总结

[Bjkb]

项目简介

公司需要一个便捷的方式获取员工的照片以制作工牌，靠人力收集的话，则无法保证图片的效果以及标准，浪费人力时间。制作成H5，方便大家上传规范的图片。

---

技术选型

公司技术栈

公司推荐使用的技术栈有：React，Jquery，ES6，这里考虑到这个项目比较轻量，没有过多的DOM操作，直接选择了原生的ES6开撸

需要实现的功能

• 判断图片的大小（大于1MB,小于等于10MB）
• 上传、预览图片
• 图片可支持放大，缩小，裁剪，旋转
• 产品希望在裁剪的过程时，遇到无网络情况也能保存，下次进来直接预览

实现的难点在于 放大，缩小，裁剪，旋转这一项功能。

当时查看组件库中无此组件，项目周期只有一周（前端开发只有2天），根本不够撸一个稳定版组件。只能退而求其次，选择第三方组件，最后经过，issues，star，pkgSize，操作性四个方面的考量，选择了cropperjs

---

项目的基本架构（前端的部分）

项目难点以及遇到的坑

项目难点

项目还是比较简单的，这里略过不提。

遇到的坑以及解决方法

裁剪的图片过大，使用localstorage无法保存

需要保存是因为需要满足 裁剪之后，虽然没有上传，但是也不用重新选择照片再次裁剪的功能

具体问题

• 裁剪图片时可能大于5MB的图片，本地存储无法存储（chrome最大限制为5MB），只能通过IndexedDB的方式进行存储，但是这个API对低版本的IOS，Android不支持。

解决方案

• 裁剪三张不同质量的图片，一张用于预览（localStorage），一张用于备用（localStorage），一张用于上传(IndexedDB)。
• 如果用户裁剪完成离线之后，再回来上传，则通过判断是否支持IndexedDB，不支持就降级，选择备用的图片（localStorage）
• 为啥不直接用备用的？不用IndexedDB呢，因为产品要求，她想要最好的...
• 为啥不上传到服务器，再下载回来呢？因为考虑到用户可能会多次裁剪，每次裁剪就上传，太浪费了，而且请求下来的图片也很慢。

Canvas.toDataURL 有时候得到的base64图片是白色的

具体问题

• 多次裁剪之后，有时候会得到白色的预览图

解决方案

• 图片未加载，img.onload未完成就转换，将其简单修改
• 跨域图片，加上图片属性crossorigin或者日期属性

上传base64的图片数据，网络请求一直无响应，页面崩溃

具体问题

• 有时候上传大于6MB的base64图片，会让浏览器卡死

解决方案

• 推测是因为base64的字符串太长，上传的时候造成浏览器的内存增加，然后服务器没响应，就卡死了
• 将base64的图片转换成file(blob)文件上传

---

项目总结

• 通过这次不大的项目，学到了很多东西，也是对自己的一个综合性的考量
• 这个项目里面，肯定也存在一些不合理的地方，以后遇到类似的问题，就会有更优的选择了