uniapp 电商app 实现长按图片保存到本地相册功能

迷南。 2021-07-25 18:45 1392阅读 0赞

#### 保存图片到本地相册uni.saveImageToPhotoAlbum ####

最近app需要一个保存图片到本地的功能，通过uniapp官网，可以查看到有一个方法：  
[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 插件市场——保存图片插件][uniapp 1]

插件的使用方法很简单：

功能介绍
    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

我不需要预览图片这个功能，我要实现的是点击图片或长按图片就可以实现保存，所以针对插件做了一下改动。

<template>
    	
    	<view class="preview-photo-box flex-box">
    		
    		<view class="item tc">
    			<image class="receive-qrcode-img" :src="url" mode="widthFix" @tap="save" @longtap="toSave"></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>

[uniapp]: https://uniapp.dcloud.io/api/media/image?id=saveimagetophotosalbum
[uniapp 1]: https://ext.dcloud.net.cn/plugin?id=539