前端 uniapp 实现base64格式图片保存到相册
saveHeadImgFile() {let base64 = this.qrImgUrl;const bitmap = new plus.nativeObj.Bitmap("test");bitmap.loadBase64Data(base64, function() {const url = "_doc/" + new Date().getTime() + ".png";// url为时间戳命
·
saveHeadImgFile() {
let base64 = this.qrImgUrl;
const bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64, function() {
const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
console.log('saveHeadImgFile', url)
bitmap.save(url, {
overwrite: true, // 是否覆盖
// quality: 'quality' // 图片清晰度
}, (i) => {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
bitmap.clear()
}
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}
<template>
<!-- 预览图片 -->
<view class="preview-photo-box flex-box">
<view class="item tc">
<image class="receive-qrcode-img" :src="url" mode="widthFix" @longtap="toSave"></image>
</view>
</view>
</template>
<script>
export default {
props: {
url: {
type: String,
default: ''
}
},
data() {
return {};
},
methods: {
hide() {
this.$emit('hide');
},
saveImgFile() {
let base64 = this.url;
const bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64, function() {
const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
console.log('saveHeadImgFile', url)
bitmap.save(url, {
overwrite: true, // 是否覆盖
// quality: 'quality' // 图片清晰度
}, (i) => {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
bitmap.clear()
}
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
},
toSave() {
uni.showModal({
title: '图片保存',
content: '确定要保存图片吗',
success: e => {
if (e['confirm']) {
this.saveImgFile();
}
}
});
}
}
};
</script>
<style lang="scss">
.preview-photo-box {
width: 100%;
height: 100%;
z-index: 99;
justify-content: center;
align-items: center;
.item {
.receive-qrcode-img {
position: relative;
z-index: 2;
width: 224upx;
height: 224upx;
margin: 0 auto;
}
}
}
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)