uniapp-图片转base64（兼容支付宝小程序）

最近遇到了一个新需求，使用uniapp开发并打包成小程序在uniapp上运行，页面内涉及到一个图片上传的功能，原先微信小程序内的图片上传对接挺简单的，类似的尝试了一下走文档，发现后端解析图片部分存在问题，经过一番讨论，后端决定让前端将图片信息转成base64再传给接口。
此时问题来了，uniapp内的图片信息转换插件均不支持在支付宝程序内调用，如不信，可以亲身尝试一波，会提示无权限调用接口。
亲测无效的一个插件

image-tools


//官方下载后，支付宝小程序真机上测试，直接报错，报错信息为无权限调用该接口

话不多说，直接上可用的实现代码。

页面标签部分：

逻辑部分：

export default {
	data() {
		return {
			canvasWidth: 200, //绘制canvas的默认宽度
			canvasHeight: 200, //绘制canvas的默认高度
			base64: ''
		};
	},
	methods: {
		//选择上传图片
		chooseUploadImg() {
			const ctx = uni.createCanvasContext('myCanvas');
			const that = this;
			uni.chooseImage({
				count: 1,
				success: res => {
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function(image) {
                          //需要动态更新canvas标签的高宽度
							that.canvasWidth = image.width;
							that.canvasHeight = image.height;
							ctx.drawImage(res.tempFilePaths[0], 0, 0, image.width, image.height);
							ctx.draw(false, () => {
								ctx.toDataURL({}).then(dataURL => {
									const base64Str = dataURL.replace('data:image/png;base64,', '');
                                    // doSomething
								});
							});
						}
					});
				},
				fail: e => {
					console.log('choose img fail');
				}
			});
		}
	}
};

样式部分:

canvas-view {
	position: absolute;
	top: -2000px;
	opacity: 0;
}

大致实现思路为，

1. 选择图片
2. 获取图片信息
3. canvas绘制图片~~~~
4. canvas原生方法获取base64
5. 其他处理

书写略潦草，大致意思如上，如有更好的方案或见解，请多多指教。zzZZ
如使用过程中还有存在其他疑问，可私聊。Q747379968，互相学习中。