必须先要 引入 mui.js，然后参考具体代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7.         <title></title>
  8.         <script type="text/javascript" src="js/mui.js"></script>
  9.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  10.  
  11.         <script type="text/javascript">
  12.             mui.init({
  13.                 gestureConfig: {
  14.                     longtap: true   //默认为 false, 长按事件
  15.                 }
  16.             });
  17.  
  18.             mui.plusReady(function() {
  19.                 document.addEventListener('longtap', function(e) {
  20.                     var target = e.target;
  21.  
  22.                     var bts = [{
  23.                         title: "保存到手机"
  24.                     }];
  25.  
  26.                     /**
  27.                      * actionSheet：弹出系统选择按钮框
  28.                      */
  29.                     plus.nativeUI.actionSheet({
  30.                         cancel: "取消",
  31.                         buttons: bts
  32.                     }, function(e) {
  33.  
  34.                         if(e.index > 0){
  35.                             saveImage(target)
  36.                         }
  37.                     });
  38.  
  39.                 });
  40.             });
  41.  
  42.             /**
  43.              * 1. 获取图片的链接
  44.              * 2. 创建下载并下载图片
  45.              * 3. 保存至相册
  46.              */
  47.             function saveImage(target) {
  48.                 var imgUrl = target.src;
  49.                 var timestamp = (new Date()).valueOf();
  50.                 var downLoader = plus.downloader.createDownload(imgUrl, {
  51.                     method: 'GET',
  52.                     filename: '_downloads/image/' + timestamp + '.png'
  53.                 }, function(download, status) {
  54.                     var fileName = download.filename;
  55.                     /**
  56.                      * 保存至本地相册
  57.                      */
  58.                     plus.gallery.save(fileName, function() {
  59.                         mui.toast("保存成功");
  60.  
  61.                     });
  62.                 });
  63.  
  64.                 /**
  65.                  * 开始下载任务
  66.                  */
  67.                 try{
  68.                     downLoader.start();
  69.                 }catch(e){
  70.                     //TODO handle the exception
  71.                     mui.toast("请长按图片保存");
  72.                 }
  73.             }
  74.  
  75.         </script>
  76.     </head>
  77.  
  78.     <body>
  79.         <div>
  80.             <img src="http://cdnzzz.vcgeek.cn/forward@2x.png" alt="" />
  81.         </div>
  82.         <div>
  83.             <h1>nnnnnn</h1>
  84.         </div>
  85.  
  86.         <div>
  87.             <img src="http://cdnzzz.vcgeek.cn/business@2x.png" alt="" />
  88.         </div>
  89.     </body>
  90.  
  91. </html>

注意：img 里面的 src  只能填写网络路径，否则下载不了。

效果展示

Mui 长按保存图片的更多相关文章

  1. wap2app（七）-- 长按保存图片

    用Hbuilder打包网站,在打包好的app中是无法像网站那样直接使用长按图片保存的功能的,需要在网站里对来自wap2app进行单独处理,接下来介绍一下如何在Hbuilder打包后的app里实现长按图 ...

  2. Swift版本UIWebView长按保存图片

    起因 最近需要做个IOS的壳子,用到长按保存图片的功能,发现百度出来的全是OC语法的例子,很多都不是全面,只能自己写一份Swift版本的,图片下面附上Github地址 效果图 Github地址:htt ...

  3. Android WebView Long Press长按保存图片到手机

    <span style="font-size:18px;">首先要先注册长按监听菜单 private String imgurl = ""; /** ...

  4. WebView长按保存图片；WebView不跳转到系统的浏览器；WebView加载显示进度条；WebView返回事件处理；

    直接看代码即可,代码里面注释写的很清楚,这个类拉下来就能用: 写法和命名比较粗暴,但也简单易懂: public class MainActivity extends AppCompatActivity ...

  5. webview长按保存图片

    private String imgurl = ""; /***     * 功能:长按图片保存到手机     */    @Override    public void onC ...

  6. 微信小程序--预览previewImage（长按保存图片）

    最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...

  7. h5页面长按保存图片

    由于之前几乎没有使用过canvas:今天遇到了一个很棘手的问题.canvas生成后,然后长按保存到手机. 正常的流程应该是先用canvas进行画图,然后再把canvas转成地址,最后再把转化的地址给i ...

  8. 上传图片，图片过大压缩处理以及解决自拍时会出现图片横屏的bug修复、长按保存图片

    js部分:module.exports = { resize: function (file, callback, options) { //配置 options = Object.assign({ ...

  9. wap2app（九）-- 使用mui.previewImage之后，页面a链接不能跳转

    使用Hbuilder的长按保存图片的预览图片之后,页面所有的a链接都不能跳转. 解决办法: 可以使用下面绑定tap利用js跳转,亲测有效. mui('body').on( 'tap' , 'a' , ...

随机推荐

  1. 阿里云ecs安全组端口开放设置

    新买的一些云服务,上面操作都没问题还是无法访问,需要在购买的服务里加上安全规则,如图: 点击配置规则进行操作

  2. mybatis <=或这个>=提示错误Tag name expecte问题解决

    解决方案: 1.将<号或者>号进行转义 DATE_SUB(CURDATE(), INTERVAL 31 DAY) <= DATE(created) 2.使用<![CDATA[ ...

  3. java基础之和String相关的一些转换

      String虽然不是java的基本数据类型,但使用的频率却非常之高,可以说是很常见了. 列举几个常见的关于String的转换,写的有点过于简洁,欢迎纠错和补充   1.Object和String的 ...

  4. .NET进阶篇-丑话先说，Flag先立

    作为开发者,工作了几年,也总觉得技术栈和刚毕业区别不大,用的技术还都是N年前的,每每看到新东西,也只心里哇塞惊叹一下,然后就回归于忙碌.怪自己的技术池太浅,热门的令人称奇的技术也都是在其他巨人的肩膀上 ...

  5. MySQL 复制已存在的表生成新表

    从已有的表创建一个新的空表 CREATE TABLE new_table LIKE old_table; 注意: create table ... like 创建的表会保留原有表的字段.索引的定义,但 ...

  6. wildfly（JBoss AS）应用服务器快速入门

    什么是wildfly JBoss AS 从8版本起名为wildfly.Wildfly是一个开源的基于JavaEE的轻量级应用服务器.可以在任何商业应用中免费使用. WildFly是一个灵活的.轻量的. ...

  7. C语言--最大公约数

    //辗转相除法 int main() { int a,b; int t; scanf("%d %d", &a,&b); ) { t = a%b; a = b; b ...

  8. web开发基础之HTTP协议

    HTTP协议 HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数 ...

  9. Qt5教程: (5) Lambda匿名函数的使用

    Lambda是C++11的新特性, 首先看看你的.pro项目文件里有没有CONFIG += c++11这句话, 没有就加上. 下面新建一个工程, 具体步骤就不多说了 然后给主窗口添加一个按钮b, 并且 ...

  10. Windows常用操作

    目录 查询IP地址 常用快捷键 显示文件后缀名 查询IP地址 1.进入到dos界面 2.输入命令: ipconfig 常用快捷键 快捷键 作用 win+E 打开计算机 win+R 打开运行 win+R ...