获取图片Base64编码
方式一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]
使用FileReader 对象接收blob
方式二：canvas.toDataURL()方法
实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ''
使用了Jquery库的$.Deferred()方法
从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。方法名就是 atob 和 btoa ，具体语法如下：
IE8/IE9的polyfill
当下，仍有不少PC项目还需要兼容IE9，所以，我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。
[if IE] 表示所有IE浏览器，由于IE10+浏览器已经放弃了著名的IE条件注释的支持，Chrome等浏览器本身就不支持这个IE私有语法，因此，很天然的，上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8，IE9浏览器引入ployfill，于是正好完美衔接上。
也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释，不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js，使浏览器也支持 window.btoa 和 window.atob 这个语法。
开源的 base64.js ，使用很简单，浏览器引入该JS文件，然后Base64编码这样：
解码就调用 decode 方法，如下：
有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
wx.chooseImage(OBJECT)
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
need-to-insert-img
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
need-to-insert-img
need-to-insert-img
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
wx.getImageInfo(OBJECT)
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner
