使用mui实现长按保存图片

摘要:
转移自:https://blog.csdn.net/qq_36676237/article/details/81533124首先初始化mui(我们使用longtap,longtap的默认值为false。如果未初始化为true,则长按事件无效)mui。init({gestureConfig:{tap:true,//默认值为true doubletap:true,//默认值为false longtap:tr

转自:https://blog.csdn.net/qq_36676237/article/details/81533124

首先初始化mui(longtap是我们要用到的,longtap默认为false,如果没有初始化为true,则长按事件无效)
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false,不监听
release:false//默认为false,不监听
}});
//给需要长按保存图片的img标签设置 class='saveImg'
var divs = document.getElementsByClassName('saveImg');
for(var i = 0;i<divs.length;i++){
divs[i].addEventListener('longtap', function () {
//开启弹框
mui('#picture').popover('toggle');
var imgurl = this.src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 关闭弹框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失败')
}
});
imgDtask.start();
});
})
}
<-- 弹框的html-->
<div style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存图片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="https://tool.4xseo.com/article/137373.html"><b>取消</b></a>
</li>
</ul>
</div>
ps:要引入mui的js和css

另一种方法:

<script type="text/javascript">mui.init({gestureConfig:{longtap:true}});


    mui.plusReady(function(){document.addEventListener('longtap',function(e){vartarget =e.target;savePic(target);});});
    /**
     * 长按保存图片
     * 1. 获取图片链接
     * 2. 创建下载并下载图片
     * 3. 保存至相册
     */functionsavePic(target){if(target.tagName =='IMG'&&target.currentSrc.length >0){//确保图片链接不为空varimgUrl =target.src;
            varsuffix =cutImageSuffix(imgUrl);
            mui.confirm("是否保存此图片","",["保存","取消"],function(event){varindex =event.index;if(index ==0){vartimestamp =(newDate()).valueOf();vardownLoader =plus.downloader.createDownload(imgUrl,{method:'GET',filename:'_downloads/image/'+timestamp+'.png'},function(download,status){varfileName =download.filename;/**
                         * 保存至本地相册
                         */plus.gallery.save(fileName,function(){mui.toast("保存成功");
                        });});/**
                     * 开始下载任务
                     */downLoader.start();}});

免责声明:内容来源于网络,仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇[转]tableExport.js 导出excel 如果有负数或是空值 导出前面会自动加上单引号泰勒级数展开下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【 linux编程 】 Makefile

Makefile:跟我一起写Makefile:https://seisman.github.io/how-to-write-makefile/overview.htmlMakefile中的include命令详解https://www.cnblogs.com/cuckoos/articles/5049984.html一 什么是makefile一个工程中的源文...

Linux下iptables 禁止端口和开放端口

1、关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放。下面是命令实现: iptables -P INPUT DROP iptables -P FORWARD DROP iptables -P OUTPUT DROP 再用命令 iptables -L -n 查看 是否设置好, 好看到全部 DROP 了 这样的设置好了,我们只是临时...

Linux 7.6查看开机自启

[root@tz-yycs-db01 etc]# systemctl list-unit-files |grep enable brandbot.path enabled auditd.service enabled autov...

iOS开发基础知识--碎片26

  iOS开发基础知识--碎片26  1:UICollectionView如果在数据不够一屏时上下滚动 当数据不多,collectionView.contentSize小于collectionView.frame.size的时候,UICollectionView是不会滚动的,可以增加下面代码就可以: self.myCollectionView.alwa...

targetcli配置iSCSI

概述:这篇文章来介绍LIO下的用户态工具targetcli来配置iSCSI服务 虚拟机环境:centos7.x(内核版本3.10.0-862.el7.x86_64) IP分别为192.168.1.200/201   targetcli安装centos一般都自带了此工具,没有的话去官网下载,这里就不再介绍   快速创建IP-SAN1.命令行输入targetc...

Xcode 编辑器之Workspace,Project,Scheme,Target

一,前言 最近老是突然对Workspace,Project,Scheme,Target四者的关系有些疑惑,所以查阅资料总结一下。 二,Workspace,Project,Scheme,Target四者的定义1. Xcode Workspace(可类比为“办公大楼”)定义:Workspace是组织projects和其他协同工作的一份文档。作用:1. 它将一些...