利用Canvas压缩图片并完成Base64编码

前言

项目迁移的过程中，或多或少都会遇到各种兼容性问题。本文是在uniapp项目迁移至微信小程序的业务背景下，讲述如何利用Canvas压缩图片并完成Base64编码。

这两种环境下，在实现上传图片的功能时，都会用到的一个API就是chooseImage，那么，对比一下uni.chooseImage和wx.chooseImage，会发现前者返回的是一个以blob:http开头的地址，这个地址可以在浏览器中访问到图片，这里的blob实际上是一个Blob对象；而后者返回的是一个以http://tmp开头的地址，这个地址可以在微信开发者工具中查看图片，却不能在浏览器中访问到图片，这个地址实际上是微信小程序生成的临时地址。也就是这个“临时地址”，导致后续方法在Base64编码时失败。

为什么需要Canvas

说到上传图片，比较容易想到的一个API就是uploadFile，调用这个API需要提供一个服务器地址存储图片，那么，在没有服务器地址的情况下，就用到Canvas了。

具体实现过程

References

[1] https://developer.mozilla.org/zh-CN/docs/Glossary/Base64

[2] https://developer.mozilla.org/zh-CN/docs/Web/API/Blob