uniapp base64转图片保存到手机
时间: 2023-08-21 19:02:34 浏览: 199
uniapp 生成海报图片base64转换
在uniapp中,将base64数据转换为图片并保存到手机可以通过以下步骤实现:
1. 将base64字符串转为二进制数组:
```javascript
let base64Str = 'data:image/png;base64,iVBORw0KGg...'; // 以png格式为例
let arr = base64Str.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
```
2. 创建Blob对象:
```javascript
let blob = new Blob([u8arr], { type: mime });
```
3. 创建URL对象:
```javascript
let url = window.URL.createObjectURL(blob);
```
4. 创建img标签并设置src属性:
```javascript
let img = new Image();
img.src = url;
```
5. 将图片保存到手机:
```javascript
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob(blob => {
let fileReader = new FileReader();
fileReader.onload = () => {
let buffer = new Uint8Array(fileReader.result);
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, fs => {
let path = '_doc/' + Date.now() + '.png'; // 保存路径,可自定义
fs.root.getFile(path, { create: true }, fileEntry => {
fileEntry.createWriter(writer => {
writer.write(buffer);
writer.onwriteend = () => {
console.log('图片保存成功:' + path);
};
writer.onerror = err => {
console.error('图片保存失败:' + JSON.stringify(err));
};
});
}, err => {
console.error('获取文件失败:' + JSON.stringify(err));
});
}, err => {
console.error('获取文件系统失败:' + JSON.stringify(err));
});
};
fileReader.onerror = err => {
console.error('读取文件失败:' + JSON.stringify(err));
};
fileReader.readAsArrayBuffer(blob);
}, 'image/png');
```
注意:以上代码使用了uniapp的plus插件来保存图片到手机,需要在manifest.json文件中配置相关权限。如果不需要保存到手机,可以跳过第5步。
阅读全文