易者
易者
  • 发布:2023-08-01 12:20
  • 更新:2023-08-03 11:35
  • 阅读:737

请教如何用image标签显示图片Buffer?

分类:uni-app

用uniCloud.httpclient.request从微信小程序接口getUnlimitedQRCode获取到图片Buffer后,再用new Uint8Array()和uni.arrayBufferToBase64()这两个方法把图片Buffer转换成base64,这个转换后的base64是‘eyJlcn’开头的,然后

<image src="data:image/png;base64,{{base64}}" mode="aspectFit"></image>

不显示,去除空格回车换行等符号都试过,都不显示,不知道问题出在哪里,请教应该怎么解决?

2023-08-01 12:20 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com - 程序开发

const buffer = 获取数据()
const src = 'data:image/png;base64,' + uni.arrayBufferToBase64(buffer)

  • 易者 (作者)

    这个试过了,不行。

    2023-08-03 10:51

  • 易者 (作者)

    检查了一下,是我微信AccessToken的问题,现已解决,谢谢!只是微信获取小程序码的接口即使AccessToken有问题也还返回buffer,这就有点儿迷惑人了!

    2023-08-03 12:32

DCloud_uniCloud_CRL

DCloud_uniCloud_CRL

这个长度看起来不像是图片呢?

  • DCloud_uniCloud_CRL

    解析了下base64内容,

    2023-08-03 11:36

  • DCloud_uniCloud_CRL

    请求微信出错了,你判断下状态码

    2023-08-03 11:36

  • 易者 (作者)

    回复 DCloud_uniCloud_CRL: 检查了一下,是我微信AccessToken的问题,现已解决,谢谢!只是微信获取小程序码的接口即使AccessToken有问题也还返回buffer,这就有点儿迷惑人了!

    2023-08-03 12:30

  • DCloud_uniCloud_CRL

    回复 易者: 这要看你云函数怎么返回了

    2023-08-03 13:07

  • 易者 (作者)

    回复 DCloud_uniCloud_CRL: 不做处理,原样返回的。

    2023-08-04 16:11

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

base64数据截图看看

  • 易者 (作者)

    具体内容回复在下一楼,请移步观看,谢谢!

    2023-08-01 18:35

易者

易者 (作者)

页面源码如下:

<template>  
    <view>  
        小程序码:{{tmp}}  
        <image src="data:image/png;base64,{{tmp}}" mode="aspectFit"></image>  
    </view>  
</template>  

<script>  
    const myactions = uniCloud.importObject('myactions');  
    export default {  
        data() {  
            return {  
                tmp: ''  
            }  
        },  
        onLoad(){  
            this.prt();  
        },  
        methods: {  
            async prt(){  
                let mydata = {  
                    scene: 'qrctype=1&fpos=3'  
                };  
                let tmp = await myactions.getWxAcode(mydata);  
                console.log('tmp是:',tmp.data);  
                let arrayBuffer = new Uint8Array(tmp.data)  
                console.log('arrayBuffer是:',arrayBuffer);  
                let base64 = uni.arrayBufferToBase64(arrayBuffer)  
                base64 = base64.replace("/data:image//png;base64,/","");  
                base64 = base64.replace("/\/","");  
                base64 = base64.replace(/[\r\n]/g,"");  
                console.log('base64是:',base64);  
                this.tmp = base64;  
            }  
        }  
    }  
</script>  

<style>  

</style>

页面效果图如下:

base64等数据控制台打印截图如下:

页面源代码中去掉那几个replace也是一样无法显示图片。

易者

易者 (作者)

base64是:

eyJlcnJjb2RlIjo0MDAwMSwiZXJybXNnIjoiaW52YWxpZCBjcmVkZW50aWFsLCBhY2Nlc3NfdG9rZW4gaXMgaW52YWxpZCBvciBub3QgbGF0ZXN0LCBjb3VsZCBnZXQgYWNjZXNzX3Rva2VuIGJ5IGdldFN0YWJsZUFjY2Vzc1Rva2VuLCBtb3JlIGRldGFpbHMgYXQgaHR0cHM6Ly9tbWJpenVybC5jbi9zL0p0eHhGaDMzciByaWQ6IDY0Y2FmZWJkLTM2NGQ1OTVjLTIwYTJlODU1In0=

arrayBuffer是:

[123,34,101,114,114,99,111,100,101,34,58,52,48,48,48,49,44,34,101,114,114,109,115,103,34,58,34,105,110,118,97,108,105,100,32,99,114,101,100,101,110,116,105,97,108,44,32,97,99,99,101,115,115,95,116,111,107,101,110,32,105,115,32,105,110,118,97,108,105,100,32,111,114,32,110,111,116,32,108,97,116,101,115,116,44,32,99,111,117,108,100,32,103,101,116,32,97,99,99,101,115,115,95,116,111,107,101,110,32,98,121,32,103,101,116,83,116,97,98,108,101,65,99,99,101,115,115,84,111,107,101,110,44,32,109,111,114,101,32,100,101,116,97,105,108,115,32,97,116,32,104,116,116,112,115,58,47,47,109,109,98,105,122,117,114,108,46,99,110,47,115,47,74,116,120,120,70,104,51,51,114,32,114,105,100,58,32,54,52,99,97,102,101,98,100,45,51,54,52,100,53,57,53,99,45,50,48,97,50,101,56,53,53,34,125]

要回复问题请先登录注册