原生小程序 长按保存图片

.wxml

longpress:手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

<view class="poster">
		<image src="{
    
    {poster}}" bindlongpress="saveImage" data-url="{
    
    {poster}}"></image>
	</view>

.js

// 长按保存功能--授权部分
		saveImage(e) {
    
    
			let _this = this
			wx.showActionSheet({
    
     //显示操作菜单
				itemList: ['保存到相册'],
				success(res) {
    
    
					let url = e.currentTarget.dataset.url;
					wx.getSetting({
    
    
						success: (res) => {
    
    
							if (!res.authSetting['scope.writePhotosAlbum']) {
    
     //判断是否授权
								wx.authorize({
    
     //如果没授权,则向用户发起授权请求
									scope: 'scope.writePhotosAlbum',
									success: () => {
    
    
										// 同意授权
										_this.saveImgInner(url);
									},
									fail: (res) => {
    
    
										console.log(res);
										wx.showModal({
    
    
											title: '保存失败',
											content: '请开启访问手机相册权限',
											success(res) {
    
    
												wx.openSetting()
											}
										})
									}
								})
							} else {
    
    
								// 已经授权了
								_this.saveImgInner(url);
							}
						},
						fail: (res) => {
    
    
							console.log(res);
						}
					})
				},
				fail(res) {
    
    
					console.log(res.errMsg)
				}
			})
		},
		// 长按保存功能--保存部分
		saveImgInner(url) {
    
    
			wx.getImageInfo({
    
    
				src: url,
				success: (res) => {
    
    
					let path = res.path;
					wx.saveImageToPhotosAlbum({
    
    
						filePath: path,
						success: (res) => {
    
    
							console.log(res);
							wx.showToast({
    
    
								title: '已保存到相册',
							})
						},
						fail: (res) => {
    
    
							console.log(res);
							wx.showToast({
    
    
								title: '保存失败',
							})
						}
					})
				},
				fail: (res) => {
    
    
					console.log(res);
					wx.showToast({
    
    
						title: '保存失败',
					})
				}
			})
		},

注:获取网络图片信息时,网络图片的域名一定要配置好

Guess you like

Origin blog.csdn.net/weixin_45703155/article/details/120087975