Base64编码 是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息，因此在很多有关图像的应用或者接口调用中，base64编码常常被用来进行传输图片数据。
Base64编码在小程序中一直不是特别完善，为了解决这类问题，本文根据具体的应用场景总结了三种方法来获取图片的Base64编码。
1. canvas画图
适用场景： 获取canvas绘出的图片的base64编码、使用较早版本的小程序（1.9.9之前）
缺点： canvas只能绘出和屏幕大小一样的图片，当图片大小超过屏幕大小时，无法获取超过屏幕的部分图片的base64编码。
canvas = wx.createCanvasContext(canvas_id)
// 绘制图片到canvas， imgPath为图片的路径
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
canvas.draw(false, () => {
wx.canvasGetImageData({
canvasId: canvas_id,
x: 0,
y: 0,
width: imgWidth,
height: imgHeight,
success(res) {
// 进行png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 对png数据调用接口完成base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
}
})
})
2. 使用小程序自带接口:
适用场景：因为这个接口是微信近期完善的，所以需要微信的版本较高（1.9.9之后）； 在不需要对图片进行缩放等操作的时候，可以获取任意大小图片的base64编码。
缺点： 只能对给定图片计算base64编码，而更一般情况下，我们需要将图片的宽度缩放至小于或等于屏幕的宽度。
// Base64
let base64 = wx.getFileSystemManager().readFileSync(imgPath, "base64")
3. 通过后台服务器处理
适用场景：在需要对图片先进行缩放操作等预处理再获取base64编码。
缺点： 需要部署云服务器， 编码速度较慢。
# 以下是基于Flask框架的服务器端处理base64请求的代码，仅供参考.
@app.route('/get_base64', methods=['GET','POST'])
def trans_base64():
data_dir = './data/image'
file_obj = request.files["img"].read()
width = int(round(float(request.form.get('width'))))
height = int(round(float(request.form.get('height'))))
img = Image.open(BytesIO(file_obj))
img = img.resize((width, height), Image.ANTIALIAS)
output_buffer = StringIO()
img.save(output_buffer, format='png')
binary_data = output_buffer.getvalue()
base64_data = base64.b64encode(binary_data)
return base64_data
# 小程序端的base64请求代码.
wx.uploadFile({
url: 'your_host_address:port/get_base64',
filePath: path,
formData: {
'width': sys_width, // resize width.
'height': sys_width / img_radio // resize height.
},
success: function (res) {
let base64 = res.data
console.log("base64 is :", base64)
}
})
总结
之前在计算图片的base64编码上走了不少弯路，总想着不通过后台交互就把这件事搞定，于是看到网上很多教程，类似下面的代码：
urlTobase64(url){
request({
url:url,
responseType: 'arraybuffer',
success:res=>{
let base64 = wx.arrayBufferToBase64(res);
base64 = 'data:image/jpeg;base64,' + base64
console.log(base64)
}
})
}
wx.chooseImage({
success:res=>{
this.urlTobase64(res.tempFilePaths[0])
}
})
初步看是没有什么问题，而且在pc端开发测试时可以正常运行，但是一旦使用手机端测试时就不work了。后来想了一下，我们拿到的图片的临时地址（res.tempFilePaths[0]）都是http开头的，而微信明确规定不支持http类型的request， 所以在手机端测试会有问题。
以上是我对于小程序中base64转码的一些分享，如果有任何问题，可以评论或者私信交流，希望上述的内容能给小程序的开发者带来一些帮助，避免踩坑。如果感觉这篇文章对你有用的话，欢迎打赏，
最后，欢迎大家使用我的小程序 识图解字， 完全免费哦：
识图解字
网友评论