E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

小程序图片转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.wxmlimport 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)      }    })注意版本库要在1.9.9以后的版本才支持,注意版本控制。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序图片转Base64,方法总结。
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏