收藏
回答

请问我获取到后端的二进制流图片数据,怎么转换成可以直接显示图片的url路径?


我通过writerFile写入了watermarkInfo.jpg中 后续我要怎么把他转换为url路径 或者怎么显示出来图片啊

回答关注问题邀请回答
收藏

6 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-08-27

    使用wx.getFileSystemManager().readFile 指定 encoding:"base64",得到图片base64内容

    imgBase64 = 'data:image/jpg;base64,'+得到图片base64内容

    image的src="{{imgBase64}}"



    如果你写文件那一步的 res.data就已经是二进制数据的话,就直接使用下面这个,都不用写文件了

    var base64 = wx.arrayBufferToBase64(res.data);

    console.log(base64);

    this.setData({

    imgBase64: 'data:image/jpg;base64,' + base64

    })



    2019-08-27
    有用 1
    回复 14
    • 君落燕
      君落燕
      2019-08-27
      wx.getFileSystemManager().readFile({ //读取文件 filePath: wx.env.USER_DATA_PATH + '/watermarkInfo.jpg', encoding: 'base64', success: res => { var base64=wx.arrayBufferToBase64(res.data) console.log(base64) app.globalData.testimgsrc='data:image/jpg;base64'+base64
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-27
      我这样读取的图片src是:data:image/jpg;base64
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-27


      2019-08-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-08-27回复君落燕

      你的writeFile和readFile那2步都不要,替换成


      var base64 = wx.arrayBufferToBase64(res.data);

      app.globalData.testimgsrc = 'data:image/jpg;base64,' + base64



      2019-08-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-08-27回复君落燕

      你如果用wx.getFileSystemManager().readFile指定了encoding为 'base64',结果就已经是base64数据,就没必要用arrayBufferToBase64了

      2019-08-27
      回复
    查看更多(9)
  • 2020-08-26

    楼主你解决了吗?

    2020-08-26
    有用
    回复
  • WGinit
    WGinit
    2019-08-27

    我也做过水印,用的阿里的接口,但没你这么复杂,这肯定有优化的地方把

    2019-08-27
    有用
    回复 5
    • 君落燕
      君落燕
      2019-08-27
      麻烦问一下,您那个水印项目,后端返是直接返回水印图片的url链接还是二进制码 或者是base64码啊
      2019-08-27
      回复
    • WGinit
      WGinit
      2019-08-27回复君落燕
      返回URL
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-27回复WGinit
      后端要是能返回url就没这么麻烦了,转码的过程太蛋疼了
      2019-08-27
      回复
    • WGinit
      WGinit
      2019-08-27回复君落燕
      你们图片不保存到服务器的?
      2019-08-27
      回复
    • PLUTO
      PLUTO
      2020-06-04回复君落燕
      大哥你的怎么解决的
      2020-06-04
      回复
  • 更容易记住你🇨🇳
    更容易记住你🇨🇳
    2019-08-27

    我也碰到了这个问题,网上说要再请求头里设置什么,感觉比较麻烦,后来我让后端帮忙转成base64发给我,然后image的src值设置成'data:image/jpeg;base64,'+base64图片就能显示了

    2019-08-27
    有用
    回复 4
    • 君落燕
      君落燕
      2019-08-27
      后端传base64才行吗。。。
      2019-08-27
      回复
    • 卢霄霄
      卢霄霄
      2019-08-28回复君落燕
      跟你说了 返回二进制加个responseType:"arraybuffer"就行了啊。。
      2019-08-28
      回复
    • 君落燕
      君落燕
      2019-08-28回复卢霄霄
      拿到的图片路径是http://usr/watermarkInfo.jpg 显示不出来
      2019-08-28
      回复
    • 刘晓兵
      刘晓兵
      2019-11-14回复卢霄霄
      你太牛了霄哥
      2019-11-14
      回复
  • 卢霄霄
    卢霄霄
    2019-08-27

    直接你readFile用的这个路径 设到 image 的src里就可以

    2019-08-27
    有用
    回复 13
    • 君落燕
      君落燕
      2019-08-27
      设置成src会成为http://usr/watermarkInfo.jpg这样的图片,加载不出来
      2019-08-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-08-27回复君落燕
      那样不行的,看我的回答
      2019-08-27
      回复
    • 卢霄霄
      卢霄霄
      2019-08-27回复君落燕
      request的时候再header里加上,responseType:"arraybuffer",不然返回的是二进制流的文本格式哦
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-28回复卢霄霄
      设置了拿到的图片路径是http://usr/watermarkInfo.jpg,还是显示不出来
      2019-08-28
      回复
    • 卢霄霄
      卢霄霄
      2019-08-28回复君落燕
      做个代码片段吧,除非你后台传的不是二进制流。。
      2019-08-28
      回复
    查看更多(8)
  • var 友原
    var 友原
    2019-08-27

    wx.downloadFile将图片下载下来

    wx.downloadFile({
      url: '生成二进制图片的链接',
      success: res => {
        if(res.tempFilePath) {
          //res.tempFilePath就是图片链接
        }else {
          toast("图片生成失败")
        }
      },
      fail: (err) => {
        console.log(er)
      }
    })


    2019-08-27
    有用
    回复 5
    • 君落燕
      君落燕
      2019-08-27
      我要传两个文件给后端,然后后端返回给我二进制流的文件,不能用wx.downloadFile方法吧
      2019-08-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-08-27回复君落燕
      你为什么要传文件到后端,再让后端给你传回二进制数据,这是什么逻辑
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-27回复o0o有脾气的酸奶
      就是加水印,我传给后端要加水印的图片和水印信息,后端在返回给我添加了水印的图片
      2019-08-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-08-27回复君落燕
      加水印信息,小程序端也可以完成吧,比如用canvas
      2019-08-27
      回复
    • 君落燕
      君落燕
      2019-08-27回复o0o有脾气的酸奶
      要看水印的类型和强度了,这个设计到算法了,前端做不了
      2019-08-27
      回复
登录 后发表内容
问题标签