最近业务需要:将图片转为base64格式。
so~~~;百度n多资料最后写成,还是有一点小bug就是生成的图片不太清晰;
文章最后还有代码的下载地址
参考资料:
微信小程序文档-wx.canvasGetImageData
UPNG.js下载地址
代码奉上:
wxml
<!-- wxml -->
<button bindtap='fetch'>上传</button>
<canvas canvas-id='myCanvas' style="width: 400px; height: 500px;"></canvas>
<image src='{{b64}}'></image>
js
这里需要引入一些转base64的js
const upng = require('../../utils/UPNG.js')
//可以在上面的参考资料里进行下载
fetch() {
const ctx = wx.createCanvasContext('myCanvas')
const platform = wx.getSystemInfoSync().platform
const imgWidth = 400, imgHeight=500;
wx.chooseImage({
success: res => {
//生成的图片临时路径画成canvas
ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)
ctx.draw(false, () => {
wx.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: imgWidth,
height: imgHeight,
success: res => {
if (platform === 'ios') {
// 兼容处理:ios获取的图片上下颠倒
res = this.reverseImgData(res)
}
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// console.log('data:image/jpeg;base64,' + base64)
this.setData({
b64: 'data:image/jpeg;base64,' + base64
});
},
fail(res) {
console.log(res)
},
})
})
}
})
},
//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
},
下载地址:https://download.csdn.net/download/weixin_38023551/10513997
参考资料:https://github.com/zh8637688/wx-cardscanner