uniapp-图片转base64（支付宝小程序内可用）

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

image-tools  

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

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

页面标签部分：

<view>  
        <canvas id="myCanvas" class="canvas-view" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>  
</view>

逻辑部分：

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');  
                }  
            });  
        }  
    }  
};  
</script>

样式部分:

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

大致实现思路为，

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

本人原文地址：https://segmentfault.com/a/1190000039793934

请多多指教。