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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title></title>

        <script type="text/javascript" src="js/mui.js"></script>

        <link rel="stylesheet" type="text/css" href="css/mui.css" />

        <script type="text/javascript">

            mui.init({

                gestureConfig: {

                    longtap: true   //默认为 false, 长按事件

                }

            });

            mui.plusReady(function() {

                document.addEventListener('longtap', function(e) {

                    var target = e.target;

                    var bts = [{

                        title: "保存到手机"

                    }];

                    /**

                     * actionSheet：弹出系统选择按钮框

                     */

                    plus.nativeUI.actionSheet({

                        cancel: "取消",

                        buttons: bts

                    }, function(e) {

                        if(e.index > 0){

                            saveImage(target)

                        }

                    });

                });

            });

            /**

             * 1. 获取图片的链接

             * 2. 创建下载并下载图片

             * 3. 保存至相册

             */

            function saveImage(target) {

                var imgUrl = target.src;

                var timestamp = (new Date()).valueOf();

                var downLoader = plus.downloader.createDownload(imgUrl, {

                    method: 'GET',

                    filename: '_downloads/image/' + timestamp + '.png'

                }, function(download, status) {

                    var fileName = download.filename;

                    /**

                     * 保存至本地相册

                     */

                    plus.gallery.save(fileName, function() {

                        mui.toast("保存成功");

                    });

                });

                /**

                 * 开始下载任务

                 */

                try{

                    downLoader.start();

                }catch(e){

                    //TODO handle the exception

                    mui.toast("请长按图片保存");

                }

            }

        </script>

    </head>

    <body>

        <div>

            <img src="http://cdnzzz.vcgeek.cn/forward@2x.png" alt="" />

        </div>

        <div>

            <h1>nnnnnn</h1>

        </div>

        <div>

            <img src="http://cdnzzz.vcgeek.cn/business@2x.png" alt="" />

        </div>

    </body>

</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. idea 自动生成并跳转单元测试

    在要测试的类上按快捷键ctrl + shift + t,选择Create New Test,在出现的对话框的下面member内勾选要测试的方法,点击ok 或者点击菜单栏Navigate–>tes ...

  2. Base64编码有时会默认换行 [转]

    Base64编码有时会默认换行 2013-01-27 20:59 6647人阅读 评论(0) 收藏 举报  分类: Base64 换行 版权声明:本文为博主原创文章,未经博主允许不得转载.       ...

  3. 移动端适配（手机端rem布局详解）

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  4. ThinkPHP框架快速开发网站

    使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助 ...

  5. Python 正则re匹配中文、英式数字

    #coding:utf-8 import re s = u''' 或多或少的好好读书电锯惊魂20202 和水电费后是否会时候1212没收到风10.12海大富的是粉红色的和办法的1244525.000 ...

  6. Mysql高手系列 - 第20篇：异常捕获及处理详解（实战经验）

    Mysql系列的目标是:通过这个系列从入门到全面掌握一个高级开发所需要的全部技能. 这是Mysql系列第20篇. 环境:mysql5.7.25,cmd命令中进行演示. 代码中被[]包含的表示可选,|符 ...

  7. 《java编程思想》P22-P37（第二章一切都是对象）

    1.JAVA操纵的标识符实际上是对象的一个"引用";如String s;里的s是String类的引用并非对象. 2.程序运行时,有五个不同的地区可以存储数据. (1)寄存器:最快的 ...

  8. Python_深拷贝和浅拷贝

    深拷贝与浅拷贝 import copy v = 123 v1 = copy.copy(v) #浅拷贝 v2 = copy.deepcopy(v) #深拷贝 **拷贝只拷贝可变数据类型,浅拷贝只拷贝第一 ...

  9. (未完)经典Web漏洞实战演练靶场笔记

    记录下自己写的经典Web漏洞靶场的write up,包括了大部分的经典Web漏洞实战场景,做个笔记. 0x01 任意文件下载漏洞 if(!empty($_GET['filename'])){ $fil ...

  10. CDN实现原理

    避让:尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定. 检测:通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时监 ...