收藏
回答

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

问题模块
API和组件

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

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

43 个回答

  • 问
    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
    赞同 1
    回复
  • 命运
    命运
    2018-02-02

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

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

    再去获取像素信息。


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

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

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

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


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


      2018-08-01
      回复
  • AF_毕竟任鹏飞
    AF_毕竟任鹏飞
    2018-06-25

    wx.request({

    url: 'http://tmp/wx0009f93430dceb3f.o6zAJsxyeFeUYvzbJ8nfjdv2mRzc.4LgpJVDaSB9kda92809aa6220fb9bf3.png',

    method: 'GET',

    responseType: 'arraybuffer',

    success: function (res) {

    console.log(res);

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

    console.log(base64);

    }

    });


    2018-06-25
    赞同
    回复 6
    • CCC
      CCC
      2018-06-26

      在真机上能运行?

      2018-06-26
      回复
    • AF_毕竟任鹏飞
      AF_毕竟任鹏飞
      2018-06-26回复CCC

      电脑上也不行了现在,request请求不到了

      2018-06-26
      回复
    • AF_毕竟任鹏飞
      AF_毕竟任鹏飞
      2018-06-26回复CCC

      有什麽解决方法麽?

      2018-06-26
      回复
    • CCC
      CCC
      2018-06-26

      我电脑上还可以,真机一直不行,除了canvas好像目前没有别的解决办法..

      2018-06-26
      回复
    • AF_毕竟任鹏飞
      AF_毕竟任鹏飞
      2018-06-26回复CCC

      试过canvas在另外一个页面调麽?即是说我写个页面专门画图,然后返回数据,但是draw回调是异步的,不在同一页面请求不到了


      2018-06-26
      回复
    查看更多(1)
  • 路鹏
    路鹏
    2018-06-20

    写的都是啥,都是错的,正确写法已验证


    imgPath 就是通过

    wx.chooseImage生成的本地图片的地址(也可以用网络图片的URL,都可以)


    wx.request({

    url: imgPath,

    method: 'GET',

    responseType: 'arraybuffer',

    success: function (res) {

        

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


        }

    })

    2018-06-20
    赞同
    回复 1
    • CCC
      CCC
      2018-06-22

      真机测试的时候,图片地址是wxfile://开头的,wx.Request 直接报错了。

      2018-06-22
      回复
  • 向上啊
    向上啊
    2018-05-02

    44楼那个方法可以,只不过在转码时候会有bug,iphone真机转码会翻转图片

    2018-05-02
    赞同
    回复
  • 周皓
    周皓
    2018-04-08

    基本方法如8楼所述,但是绘制并不是立即完成的,canvasGetImageData需要在ctx.draw完成之后才能获取到正确数据;另外在进行base64编码前需要对图片原始数据转化成png,可以参考这里

    2018-04-08
    赞同
    回复
  • 七千
    七千
    2018-03-16

    还没解决吗?

    2018-03-16
    赞同
    回复
  • 柒柒
    柒柒
    2018-03-12

    解决了没?求方法啊

    2018-03-12
    赞同
    回复
  • 好的好呢
    好的好呢
    2018-02-06

    希望 能有好的方法 请给出建议


    插播一条 这个 论坛的 BUG



    2018-02-06
    赞同
    回复
  • 好的好呢
    好的好呢
    2018-02-06

    我们没有 没有 钱 买不起 oss 就 直接 转base64 请求 阿里的图片识别 的接口



    2018-02-06
    赞同
    回复

正在加载...