747379968@qq.com
747379968@qq.com
  • 发布:2021-04-08 17:03
  • 更新:2021-04-08 17:03
  • 阅读:41

uniapp-图片转base64(支付宝小程序内可用)

分类:uni-app

最近遇到了一个新需求,使用uniapp开发并打包成小程序在uniapp上运行,页面内涉及到一个图片上传的功能,原先微信小程序内的图片上传对接挺简单的,类似的尝试了一下走文档,发现后端解析图片部分存在问题,经过一番讨论,后端决定让前端将图片信息转成base64再传给接口。
此时问题来了,uniapp内的图片信息转换插件均不支持在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

请多多指教。

0 关注 分享

要回复文章请先登录注册