收藏
回答

小程序如何把图片转换成base64

问题模块
API和组件

小程序chooseImage时如何把图片转换成base64

最后一次编辑于  2017-07-31  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

59 个回答

  • 命运
    命运
    2018-02-02

    正确的姿势应就像这样:不要把获取像素信息放在chooseImage里

    而是要等canvas生成完图片之后,

    再去获取像素信息。


    2018-02-02
    赞同 11
    回复 2
    • 海洋
      海洋
      2018-07-30

      但是,把合成的base64图片放到image标签里,在编辑器里显示,在真机上不显示,求解。我用的是安卓手机。

      2018-07-30
      赞同
      回复
    • 命运
      命运
      2018-08-01回复海洋

      你可以看下这位同学写的:https://blog.csdn.net/qq_36875339/article/details/81086205


      时间长了,这些快忘了,你往上找下,就可以找到这位同学了,你们可以交流下,


      2018-08-01
      赞同
      回复
  • 问
    2018-05-06

    wx.createCanvasContext配合开源库UPNG对原始图像数据进行png编码。

    这位大兄弟写得很详细https://github.com/zh8637688/wx-cardscanner。他使用的是腾讯AI接口,但是都是将图片数据转为base64后上传。


    具体代码如下,记得引入UPNG.js和pako.min.js文件。

    //画布
     
    setCanvac: function (){
     
    var canvasID = "mycanvas" ;
     
    var canvas = wx.createCanvasContext(canvasID)
     
    // 1. 绘制图片至canvas
     
    var imgPath = this .data.imageInfo.path;
     
    var imgWidth = this .data.imageInfo.width;
     
    var imgHeight = this .data.imageInfo.height;
     
    var arry = this .data.imageInfo.path.split( "." );
     
    var prefix = arry[arry.length-1];
     
    prefix = "data:image/" + prefix+ ";base64," ;
     
    var that= this ;
     
    canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
     
    // 绘制完成后执行回调,API 1.7.0
     
    canvas.draw( false , () => {
     
    // 2. 获取图像数据, API 1.9.0
     
    wx.canvasGetImageData({
     
    canvasId: canvasID,
     
    x: 0,
     
    y: 0,
     
    width: imgWidth,
     
    height: imgHeight,
     
    success(res) {
     
    // 3. png编码
     
    if (platform == 'ios' ) {
     
    // 兼容处理:ios获取的图片上下颠倒
     
    res = that.reverseImgData(res)
     
    }
     
    var pngData = upng.encode([res.data.buffer], res.width, res.height);
     
    // 4. base64编码
     
    var base64 = wx.arrayBufferToBase64(pngData);
     
    //base64 = prefix + base64;
     

    //console.log(base64);

    //上传文件的方法,自己写一个就好

    that.upLoadImage(base64);
     
    }
     
    })
     
    })
     
    },
     
    //ios图片处理
     
    reverseImgData(res) {
     
    var w = res.width
     
    var h = res.height
     
    let con = 0
     
    for var i = 0; i < h / 2; i++) {
     
    for var j = 0; j < w * 4; j++) {
     
    con = res.data[i * w * 4 + j]
     
    res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
     
    res.data[(h - i - 1) * w * 4 + j] = con
     
    }
     
    }
     
    return res
     
    },


    2018-05-06
    赞同 11
    回复
  • YouHa
    YouHa
    2017-07-31

    关注

    2017-07-31
    赞同
    回复 7
    • 南城一霸贾17
      南城一霸贾17
      2018-07-18回复淺淺一笑

      你方法转的应该是string吧,题主想转的是图片

      2018-07-18
      赞同
      回复
    • 淺淺一笑
      淺淺一笑
      2018-07-18回复南城一霸贾17

      就是图片啊,你用chooseImage选择完图片,会得到一个本地 地址,用一个请求去请求这个地址,得到arraybuffer,把arraybuffer转成base64,就是图片的base64格式

      2018-07-18
      赞同
      回复
    • 淺淺一笑
      淺淺一笑
      2018-07-18

      https://blog.csdn.net/qq_36875339/article/details/81086205 ---->在下一名Android开发者,写的这边博客希望可以帮到你们,大神勿喷!!!

      2018-07-18
      赞同
      回复
    • 淺淺一笑
      淺淺一笑
      2018-07-18回复南城一霸贾17

      上一个博客地址放错了,看这个 https://blog.csdn.net/qq_36875339/article/details/81086205

      2018-07-18
      赞同
      回复
    • 南城一霸贾17
      南城一霸贾17
      2018-07-19回复淺淺一笑

      可行,点赞!

      2018-07-19
      赞同
      回复
    查看更多(2)
  • 命运
    命运
    2017-12-29

    同问。。。。

    2017-12-29
    赞同
    回复
  • 海洋
    海洋
    2018-01-15

    同问。。。

    2018-01-15
    赞同
    回复
  • 〰Astorm
    〰Astorm
    2018-01-24

    +1

    2018-01-24
    赞同
    回复
  • 命运
    命运
    2018-01-24

    现在更新了一个api,canvas里有一个getImageData了,


    2018-01-24
    赞同
    回复
  • 〰Astorm
    〰Astorm
    2018-01-24

    现在更新了一个api,canvas里有一个getImageData了,


    没找到0,0,确定有?


    https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/draw-image.html?search-input=getImageData



    2018-01-24
    赞同
    回复
  • 〰Astorm
    〰Astorm
    2018-01-24

    试了一下


    test3: function () {
        const ctx = wx.createCanvasContext('myCanvas')
     
        wx.chooseImage({
          success: res => {
            ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
            ctx.draw()
     
            wx.canvasGetImageData({
              canvasId: 'myCanvas',
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              success: res=> {
                console.log(res.width) // 100
                console.log(res.height) // 100
                console.log(res.data instanceof Uint8ClampedArray) // true
                console.log(res.data.length) // 100 * 100 * 4
                console.log(res.data)
     
                var base64 = wx.arrayBufferToBase64(res.data.buffer);
     
                this.setData({
                  b64: base64
                });
              }
            })
          }
        })
      }


    发现最终的base64结果是:

    AAAAAAAAAAAAAA(非常多个A)AAA==


    主要是不知道canvasGetImageData得出的Uint8ClampedArray是什么,应该怎么样转成ArrayBuffer,我代码那样的转化看起来应该是姿势不对

    2018-01-24
    赞同
    回复
  • 命运
    命运
    2018-01-24

    只是见过这个




    2018-01-24
    赞同
    回复