How Can I Implement the Function of Touching and Holding an Image to Save It in Quick Apps

#huawei #quickapps #android

Scenario Description

WeChat mini programs allow you save images to the album by touching and holding them. Currently, HUAWEI Quick App does not have any API to implement this function, but you can trigger events to implement this function

All quick app elements support the longpress event. So you can use the image element to render images and trigger the longpress event on the element to implement the function.

Sample code

	<template>
	<div class="doc-page">
	<div class="page-title-wrap">
	<text class="page-title">{{componentName}}</text>
	</div>
	<div class="item-container">
	<text class="item-title">Remote
	image:https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1</text>
	<div class="item-content">
	<image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" id="image" style="object-fit:cover" onlongpress="onImageLongpress"></image>
	</div>
	</div>
	</div>
	</template>
	<style>
	.doc-page {
	flex: 1;
	flex-direction: column;
	}
	.item-container {
	margin-top: 40px;
	margin-bottom: 40px;
	flex-direction: column;
	}
	.item-title {
	padding-left: 30px;
	padding-bottom: 20px;
	color: #aaaaaa;
	}
	.item-content {
	height: 200px;
	justify-content: center;
	}
	#image {
	width: 240px;
	height: 160px;
	object-fit: contain;
	}
	</style>
	<script>
	import prompt from'@system.prompt'
	import media from '@system.media'
	export default{
	private: {
	componentName:"Touch and hold the following image to save it",
	inputImageURL: 'https: //tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1'
	},
	onInit(){
	This.$page.setTitleBar({text:'Example of touching and holding an image to save it'});
	},
	onImageLongpress(){
	var that=this;
	prompt.showDialog({
	message:'Do you want to save the picture?',
	buttons: [{
	text: 'OK',
	color: '#33dd44'
	},
	{
	text: 'Cancel',
	color: '#33dd44'
	}],
	success: function(data){
	console.log("handling callback",data);
	if(data.index===0)
	{
	that.$element("image").toTempFilePath({
	fileType: 'jpg',
	quality: 1.0,
	success: function (ret) {
	console.log('toTempFilePath success:tempFilePath=' + ret.tempFilePath)
	media.saveToPhotosAlbum ({
	uri: ret.tempFilePath,
	success:function(data)
	{
	console.log("save picture success");
	},
	fail: function(data, code) {
	console.log("handling fail, code=" + code);
	}
	})
	},
	fail: function (msg, code) {
	console.log('toTempFilePath failed:code=' + code + '; msg=' + msg);
	}, complete: function (ret) {
	console.log('toTempFilePath complete');
	}
	})
	}
	},
	cancel: function(){
	console.log("cancel");
	}
	})
	}
	}
	</script>