【爬坑笔记】uni-app-图片转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，互相学习中。