uniapp 中 base64转二进制文件
·
const processBase64Image = async (base64String) => {
try {
// 分割 Base64 字符串
const [header, data] = base64String.split(';base64,');
const mimeType = header.split(':')[1];
const rawData = atob(data);
// 平台判断
let tempFilePaths = [];
// #ifdef H5
// H5 环境:使用 Blob
const blob = new Blob([new Uint8Array(rawData.length).map((_, i) => rawData.charCodeAt(i))], {
type: mimeType
});
const blobURL = URL.createObjectURL(blob);
tempFilePaths = [blobURL];
// #endif
// #ifdef MP-WEIXIN
// 微信小程序:写入临时文件
const fs = wx.getFileSystemManager();
const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.${mimeType.split('/')[1]}`;
fs.writeFileSync(filePath, rawData, 'base64');
tempFilePaths = [filePath];
// #endif
// #ifdef APP
// App 环境:使用原生 API 保存文件
const fileName = `image_${Date.now()}.${mimeType.split('/')[1]}`;
const url = `_doc/${fileName}`;
const bitmap = new plus.nativeObj.Bitmap('temp');
await new Promise((resolve, reject) => {
bitmap.loadBase64Data(base64String, () => {
bitmap.save(url, {
overwrite: true
}, () => {
bitmap.clear();
resolve();
}, (err) => reject(err));
}, (err) => reject(err));
});
tempFilePaths = [url];
// #endif
// 获取图片尺寸(H5/小程序/APP 通用)
const getImageDimensions = (base64) => {
return new Promise(async (resolve) => {
let dimensions = {
width: 0,
height: 0
};
// 平台判断
// #ifdef H5
// H5 环境:使用 Image 对象
const img = new Image();
img.onload = () => resolve({
width: img.width,
height: img.height
});
img.onerror = () => resolve(dimensions);
img.src = base64;
// #endif
// #ifdef MP-WEIXIN
// 微信小程序:使用 wx.getImageInfo
try {
const res = await wx.getImageInfo({
src: base64
});
dimensions = {
width: res.width,
height: res.height
};
} catch (e) {
console.error('获取图片尺寸失败:', e);
}
resolve(dimensions);
// #endif
// #ifdef APP
// App 环境:使用 uni.getImageInfo
try {
const res = await uni.getImageInfo({
src: base64
});
dimensions = {
width: res.width,
height: res.height
};
} catch (e) {
console.error('获取图片尺寸失败:', e);
}
resolve(dimensions);
// #endif
});
};
const dimensions = await getImageDimensions(base64String);
return {
tempFilePaths,
tempFiles: [{
path: tempFilePaths[0],
type: mimeType,
size: rawData.length,
base64: base64String,
name: `image_${Date.now()}.${mimeType.split('/')[1]}`,
...dimensions
}],
errMsg: "chooseImage:ok"
};
} catch (error) {
console.error('处理Base64时出错:', error);
throw error;
}
};
// 保存图片 uniapp 中 在H5返回的base64 app中是临时文件
const saveBase64Image = async () => {
uni.canvasToTempFilePath({
canvasId: 'tempCanvas',
success: function(rest) {
// #ifdef H5
saveFlieImage(rest.tempFilePath)
// #endif
// #ifdef APP-PLUS
var path = plus.io.convertLocalFileSystemURL(rest.tempFilePath); //绝对路径
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(path);
fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
console.log(evt.target.result); //输出base64内容
saveFlieImage(evt.target.result)
}
// #endif
}
})
}
const saveFlieImage = (savedFilePath) => {
console.log(savedFilePath)
processBase64Image(savedFilePath).then(result => {
console.log(result,"二进制信息")
});
}
<canvas canvas-id="tempCanvas" class="canvas"></canvas>
更多推荐
所有评论(0)