这段时间接了个需求“海报上传优化”

需求

老的上传逻辑为先上传海报，返回一个url，再进行裁剪，裁剪后返回后端url以及裁剪的坐标；

新版要改成本地读取用户上传海报，进行裁剪，将裁剪后的图片发给后端

好处：少了用户选中图片后等待上传的时间，优化了用户体验；

FileReader

先看fileReader兼容性，能够支持此次需求

FileReader的作用

FileReader能够和input配合，异步读取文件。

通过input拿到File文件，并传入fileReader中，这样就能拿到base64格式的文件信息

同时因为 img 可以使用 网络地址 或 base64 的方式展示。

只要将 读取的结果 赋给src就可以预览图片了。

    this.oFReader = new FileReader();    this.oFReader.readAsDataURL(event.target.files[0]);    this.oFReader.onload = (oFREvent) => {        console.log(oFREvent.target.result);    };

注意点

因为裁剪的话肯定是先用canvas把 原图片 画出来，再进行裁剪的。

ios将大图像加载到canvas的过程 RAM是有限制的，我自己测试64g内存的手机上传10M图片没有问题，上传40M图片就不行了，具体临界值没有测试。

参考文献

• [1] stackoverflow canvas-todataurl-questions