uniapp实现点击图片预览放大,长按下载图片

  1. 使用uniapp中的 uni.previewImage API 预览图片

  2. 使用uniapp中的 uni.downloadFile API 下载图片

  3. 使用uniapp中的 uni.saveImageToPhotosAlbum API 将图片保存到相册

javascript 复制代码
<template>
	<view class="content" style="padding-top: 40px;">
		<image @click="previewImage" style="width: 200px; height: 200px; background-color: #eeeeee;" src="http://**.com/images/app/kefuerweima.png"></image>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				
			}
			
		},
		
		methods: {
			
			previewImage(e) {
				var current = e.target.dataset.src
				let that = this
				uni.previewImage({
					// showmenu:true,
					current: current,
					urls: ['http://**/images/app/kefuerweima.png'],
					longPressActions :{
						itemList:['保存图片'],
						success(data) {
							let imgurl = 'http://**/images/app/kefuerweima.png'
							that.saveImage(imgurl)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					
				})
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
							    })
							}
						})
					}
				})
			},
		}
	}
</script>
相关推荐
单线程1213834 分钟前
从案例分析 Vue3 Tokenizer 源码
前端·javascript·vue.js
明月_清风37 分钟前
🖥️ Electron 三进程 Host 实战:从架构设计到生产落地的完整指南
前端·electron·客户端
GIS数据转换器1 小时前
智慧林草“一张图“平台
java·大数据·服务器·前端·javascript·数据库·人工智能
2401_885885041 小时前
国际语音php接口代码示例:PHP使用cURL快速调用语音发送API
android·开发语言·前端·人工智能·python·php·语音识别
leoZ2311 小时前
AI+前端提效-08 AI自动化文档:前端组件、接口、项目文档自动生成
前端·人工智能·深度学习·神经网络·目标检测·自然语言处理·自动化
lilian2331 小时前
HarmonyOS 7 新特性(五)|ContainerReader 容器断点与自适应布局
前端·华为·harmonyos
计算机魔术师1 小时前
Google DeepMind 将 AI 科学家 Co-Scientist 扩展为实验室集成研究伙伴
前端
2601_965798471 小时前
BrandBoost WordPress Theme Review: Fast Agency Web Architecture
前端
律宏阔1 小时前
Electron 集成 Drizzle + SQLite 踩坑笔记
前端
律宏阔1 小时前
Electron preload.ts 类型无法自动推导的解决方案
前端