一、使用小程序自带的网络请求
1、wx.request() 这种方式适合网络https路径图片,但无法解析wxfile://xxxx导致转化报错
image2Base64(imgUrl) {
return new Promise((resolve, reject) => { // promise 解决异步问题
wx.request({
url: imgUrl,
responseType: 'arraybuffer', //最关键的参数,设置返回的数据格式为arraybuffer
success: (res) => {
var base64 = wx.arrayBufferToBase64(res.data);
base64 = 'data:image/jpeg;base64,' + base64;
resolve(base64);
},
fail: (res) => {
reject(false);
}
})
})
}
2、wx.getFileSystemManager().readFile() 本地照片或拍照这种可以转化解析wxfile://xxxx
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0], //要读取的文件的路径 (本地路径)
encoding: "base64", //指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
success(res) {
//转换完毕,执行上传
_this.setData({
avatar: 'data:image/png;base64,' + res.data
})
}
})
}
})
二、使用canvas 获取图片base64
<canvas id="myCanvas" type="2d" hidden="true"></canvas>
//使用canvas 获取图片base64
async getImageBase64_canvas(tempFilePath) {
const {
width,
height
} = await wx.getImageInfo({
src: tempFilePath
});
const base64 = await new Promise(resolve => {
const query = wx.createSelectorQuery();
query.select("#myCanvas").fields({
node: true, // 获取 node
}).exec(res => {
let {
node: canvas
} = res[0];
let ctx = canvas.getContext('2d');
let image = canvas.createImage();
console.log(image);
image.src = tempFilePath;
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height);
resolve(canvas.toDataURL())
}
});
});
this.setData({
base64
})
},
三、获取全局唯一的文件管理器 读取本地文件内容
async getImageBase64_readFile(tempFilePath) {
const base64 = await new Promise(resolve => {
//获取全局唯一的文件管理器
wx.getFileSystemManager().readFile({ //读取本地文件内容
filePath: tempFilePath, // 文件路径
encoding: 'base64', // 返回格式
success: ({
data
}) => {
return resolve('data:image/png;base64,' + data);
}
});
});
this.setData({
base64
})
},