最近app需要一个保存图片到本地的功能,通过uniapp官网,可以查看到有一个方法:
uniapp 保存图片到本地相册
uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。
官方给出的示例代码如下:
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function (res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success: function () {
console.log('save success');
}
});
}
});
这段代码实现的功能是:打开相机拍摄一张图片后保存到本地相册。
uni.chooseImage
其中,sourceType
有两种类型,一种是camera
相机,一种是album
相册。
但是跟我要求的不太一样,我一开始的反应就是直接使用uni.saveImageToPhotoAlbum
这个api就行。
结果:真机运行没有问题,但是云打包后一直提示保存失败。
从网上百度得到的结果就是:我使用的是本地图片,也就是相对路径的存储方式,而uni.saveImageToPhotoAlbum
这个api支持的是网络图片。
于是我又开始从uniapp官网上查找,找到了一个插件可以实现 图片预览 图片隐藏 图片下载
的功能。
uniapp 插件市场——保存图片插件
插件的使用方法很简单:
功能介绍
1.长按保存图片
2.右下角图片点击保存图片
3.点击图片可以隐藏图片
使用教程
1.插件代码拷贝
下载后把components目录下saveFile.vue文件拷贝到自己项目目录下
2.插件全局配置
在项目里main.js中配置如下代码
import savefile from './components/saveFile.vue'
Vue.component('savefile',savefile)
3.插件使用
vue页面使用
<template>
<view>
<!-- 预览图片 -->
<savefile v-if="isShowPhoto" :url="qrUrl" @hide="hidePhoto"></savefile>
</view>
</template>
export default {
data() {
return {
qrUrl:'/static/img/img1.jpg',
isShowPhoto:true,
};
},
onLoad() {},
methods: {
hidePhoto(){
this.isShowPhoto = false;
uni.showToast({
title:'图片已隐藏',
icon:'none'
})
}
}
};
兼容性
uni-app项目中使用都兼容 除了H5
我不需要预览图片这个功能,我要实现的是点击图片或长按图片就可以实现保存,所以针对插件做了一下改动。
<!--
<savefile :url="payInfo.qrUrl" @hide="hidePhoto"></savefile>
url:是否显示图片
//隐藏预览图片
hidePhoto(){
this.isShowPhoto=false;
},
-->
<template>
<!-- 预览图片 -->
<view class="preview-photo-box flex-box">
<!-- <view class="preview-photo-bg" @tap="hide"></view> -->
<view class="item tc">
<image class="receive-qrcode-img" :src="url" mode="widthFix" @tap="save" @longtap="toSave"></image>
</view>
<!-- <view class="download-img" @tap="save">
<image
src="https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/DPC/icon/download.png"
></image>
</view> -->
</view>
</template>
<script>
export default {
props: {
url: {
type: String,
default: ''
}
},
data() {
return {};
},
methods: {
hide() {
this.$emit('hide');
},
save() {
// #ifdef APP-PLUS
uni.getImageInfo({
src: this.url,
success: function(image) {
console.log('图片信息:', JSON.stringify(image));
uni.saveImageToPhotosAlbum({
filePath: image.path,
success: function() {
console.log('save success');
uni.showToast({
title: '图片保存成功',
icon: 'none',
duration: 2200
});
}
});
}
});
// #endif
},
toSave() {
uni.showModal({
title: '图片保存',
content: '确定要保存图片吗',
success: e => {
if (e['confirm']) {
this.save();
}
}
});
}
},
created() {}
};
</script>
<style lang="scss">
// .preview-photo-box {
// position: fixed;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// z-index: 99;
// justify-content: center;
// align-items: center;
// .item {
// flex: 1 0 auto;
// .receive-qrcode-img {
// position: relative;
// z-index: 2;
// width: 100%;
// }
// }
// .download-img {
// position: absolute;
// bottom: 30upx;
// right: 30upx;
// z-index: 100;
// background: rgba(255,255,255,0.5);
// font-size: 0;
// image {
// width: 64upx;
// height: 64upx;
// }
// }
// .preview-photo-bg {
// position: absolute;
// left: 0;
// top: 0;
// z-index: 0;
// width: 100%;
// height: 100%;
// background: rgba(0, 0, 0, 0.5);
// }
// }
</style>