当前位置：首页 > news >正文

小程序转base64

news 来源：原创 2024/5/19 14:25:08

小程序图片转Base64，方法总结。

2018年07月17日 18:25:58 Aleyn. 阅读数：23092

小程序图片转base64

前言：看了很多博客没一个能解决问题的，小程序社区也逛了个遍，依然找不到小程序图片在本地转base64的方法，凡事还得靠自己啊，接下来就把所有方法做个总结，作为一个野生程序员，好东西绝对要分享。

如果不想了解踩坑历史的话，直接看第四种方法就可以了。

第一种方法

先上代码

var uploadImage = this.data.imageList[0]
var reader = new FileReader()
reader.onload = function (e) {
      var arrayBuffer = reader.result;
      var base64 = wx.arrayBufferToBase64(arrayBuffer)
}
reader.readAsArrayBuffer(new Blob(this.data.imageList))

代码看起来似乎没有问题，but~~~~~，人家微信根本就没提供 FileReader()这个方法，所以，这个方法在小程序这里，直接pass掉就行了，不可行。

第二种方法

这个方法很好，代码也是最易懂的。

首先，获取本地图片的临时路径

wx.chooseImage({
      success:res=>{
        this.urlTobase64(res.tempFilePaths[0]) 
      }
})

接下来，把临时路径作为一个请求的url，把数据返回格式设置成arraybuffer，上代码。

urlTobase64(url){
    wx.request({
      url:url,
      responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffer
      success:res=>{
	      //把arraybuffer转成base64
            let base64 = wx.arrayBufferToBase64(res.data); 
            
            //不加上这串字符，在页面无法显示的哦
            base64　= 'data:image/jpeg;base64,' + base64　
            
            //打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
            console.log(base64)　
          }
    })
 }

校验base64字符串是否是你选择的图片

到这可以看到控制台成功打印出base64字符串，在网页上校验也是你选择的图片，一切看起来是那么的美好，兄dei，先把你的笑容收起来，在开发者工具的模拟器上没问题，你在真机上试一试，就会发现请求报错了，我知道你想说，你特么知道有问题还写这干啥，别激动兄dei，先把刀放下。马上给你介绍可用的方法。

第三种方法

先说思路：这个方法是通过，小程序的Canvas绘图实现的，获取到图片后，把图片绘制到canvas上，然后通过wx.canvasGetImageData()方法获取到图片的png编码，在把png编码转成base64，对Canvas还不是太了解的同学可以先去，开发者文档上熟悉一下。

    wx.chooseImage({
      count: 1,
      success: res => {
        //获取图片的宽高
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: res => {
            this.setData({
              imgWidth: res.width,
              imgHeight: res.height
            })
          }
        })

        canvas = wx.createCanvasContext('canvas')
        
        canvas.drawImage(res.tempFilePaths[0], 0, 0, this.data.imgWidth, this.data.imgHeight) // 1. 绘制图片至canvas
        // 绘制完成后执行回调
        canvas.draw(false, () => {
          // 2. 获取图像数据
          wx.canvasGetImageData({
            canvasId: 'canvas',
            x: 0,
            y: 0,
            width: this.data.imgWidth,
            height: this.data.imgHeight,
            success(res) {
              // 3. png编码
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64编码
              let base64 = wx.arrayBufferToBase64(pngData)
              console.log(base64)
              // ...
            }
          })
        })
      }
    })

经过上边的代码我们也可以把图片转成base64,但是，问题一大堆啊有木有，图片显示不全，有的只转了一部分，或者IOS真机图片显示颠倒。有没有解决的办法呢，肯定是有的了。直接把cardscanner文件夹放在你的项目中。
然后新建一个界面，分别引用cardscanne中的文件。最下方下载资源

index.wxml文件引用cardscanner.wxml

<import src="../../cardscanner/cardscanner.wxml" />
<template is="cardscanner" />

index.wxss文件引用cardscanner.wxss


@import '../../cardscanner/cardscanner.wxss'

下边是index.js里边的内容。

import CardScanner from '../../cardscanner/cardscanner.js'

Page({
  onLoad(options) {
    let that = this
    this.imgPath = options.imgPath
    this.cardScanner = new CardScanner(this)
      .on('ImageChanged', (imgPath) => {
        that.imgPath = imgPath
        console.log(imgPath)
      })
      .on('DecodeStart', (imgPath) => {
        wx.showLoading({
          title: '生成中',
          mask: true
        })
      })
      .on('DecodeComplete', (res) => {
        if (res.code == 1) {
        //这里返回转过的base64字符串，打印查看
        let base64 = 'data:image/jpeg;base64,' + res.data
          console.log(base64)
          //做你要做的操作
          // ....
          // ....

        } else {
          console.log('解析失败：' + res.reason)
        }
        wx.hideLoading()
      })
  },
  onReady() {
    this.cardScanner.setImage(this.imgPath)
  }
})

以上是你新建界面的内容，直接复制j就行，注意修改文件引用路径，让你用最快的方式，把功能添加到项目中，如果有不同需求可以自己修改。

先上图片。

这是引用文件成功后的页面，点击选择按钮，选择图片。

这是选择完图片，把图片放在画布上的状态。

然后再点击确定按钮，正在生成的状态，由于时间稍微有点长，所以加了等待框。

这是转换成功后的控制台输出。在真机远程测试的输出。

看评论里有需求demo的在此也提供一下。直接用开发者工具打开就行了。
项目地址。

备用地址

经本人测试，基本没什么问题，唯一的缺陷就是转base64时间稍微有一点长，不过已经加等待框提示了，也不是什么大问题。

第四种

还记得第一种吗？微信没有提供操作文件的方法。最近微信更新文档了，我也赶紧跑过来更新博客，也是操碎了心啊~~，好消息来了，微信终于出文件操作相关API了。而且这次很给力。我已经迫不及待想尝试一遍了。如下图：

获取到FileSystemManager，然后调用他的readFile()或者readFileSync(),参数如下：

支持的编码格式如下：

一下上了这么多看着就酸爽，哈哈~。
那我们要把图片转base64不是小菜一碟吗~~。

    wx.chooseImage({
      success: res => {
      wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            console.log('data:image/png;base64,' + res.data)
          }
        })

		//以下两行注释的是同步方法，不过我不太喜欢用。
       	 //let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64') 
        //console.log(base64)
      }
    })