前言
项目迁移的过程中,或多或少都会遇到各种兼容性问题。本文是在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