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

1.在需要实现长按图片保存的页面引入相关css文件：

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

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

2.页面引入相关js文件：

<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>

<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>

3.将需要长按保存的图片的img标签加上属性：data-preview-src="" data-preview-group="1"

<img src="data:images/2.jpg" data-preview-src="" data-preview-group="1" />

页面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>长按保存图片</title>

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

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

        <style type="text/css">

            .photo-content{

                padding-top: 44px;

                background: #fff;

            }

            .content-padded{

                margin: 10px;

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <h1 class="mui-title">长按保存图片</h1>

        </header>

        <div class="photo-content" style="position: relative;">

            <div class="content-padded">

                <p>这是图片放大预览后长按保存图片示例，点击如下图片可全屏预览功能</p>

                <p>

                    <img src="data:images/1.jpg" data-preview-src="" data-preview-group="1" />

                </p>

                <p>图片全屏预览后，长按预览图片可以保存到本地</p>

                <p>

                    <img src="data:images/2.jpg" data-preview-src="" data-preview-group="1" />

                </p>

                <p>第三张图片</p>

                <p>

                    <img src="data:images/3.jpg" data-preview-src="" data-preview-group="1" />

                </p>

            </div>

        </div>

        <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/photosave.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

4.添加实现长按保存的js代码：

mui.init({

    gestureConfig: {

        longtap: true

    }

});

mui.previewImage();

mui.plusReady(function() {

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

        var target = e.target;

        savePic(target);

    });

});

/**

 * 长按保存图片

 * 1. 获取图片链接

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

 * 3. 保存至相册

 */

function savePic(target) {

    if(target.tagName == 'IMG' && target.currentSrc.length > 0 && target.classList.contains('mui-zoom')) { //确保图片链接不为空

        var imgUrl = target.src;

        console.log('图片地址：' + imgUrl);

        var suffix = cutImageSuffix(imgUrl);

        mui.confirm("是否保存此图片", "", ["保存", "取消"], function(event) {

            var index = event.index;

            if(index == 0) {

                /**

                 * 创建下载任务

                 * http://www.html5plus.org/doc/zh_cn/downloader.html#plus.downloader.createDownload

                 */

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

                    method: 'GET',

                    filename: '_downloads/image' + suffix

                }, function(download, status) {

                    var fileName = download.filename;

                    console.log('文件名:' + fileName);

                    console.log('下载状态：' + status);

                    /**

                     * 保存至本地相册

                     */

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

                        /**

                         * 保存后，弹出对话框是否查看；

                         */

                        mui.confirm("打开相册查看", "", ["打开", "取消"], function(event) {

                            var gindex = event.index;

                            if(gindex == 0) {

                                /**

                                 * 选择图片

                                 */

                                plus.gallery.pick(function(file) {

                                    mui.toast("你选择了图片：" + file);

                                }, function(error) {

                                    console.log(JSON.stringify(error));

                                }, {

                                });

                            }

                        });

                    });

                });

                /**

                 * 开始下载任务

                 */

                downLoader.start();

            }

        });

    }

}

// 截取图片后缀用于重命名图片，防止%E5%85%89%E6%98%8E%E8%A1%8C编码的文件不被系统相册识别；

function cutImageSuffix(imageUrl) {

    var index = imageUrl.lastIndexOf('.');

    return imageUrl.substring(index);

}

完成以上步骤后，在Hbuilder中创建一个新的wap2app项目，放入你的项目链接，打包后在手机上安装，即可查看效果。

github地址：https://github.com/erinwxl/wap2app_longtap

备注：

在Hbuilder中新建一个wap2app，选择模板--选择 Hello wap2app模板 也可查看长按保存图片的示例。

转载时请注明出处及相应链接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9959656.html，文章标题备注转载，如：xxx【转载】,谢谢！

wap2app（七）-- 长按保存图片的更多相关文章

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

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

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

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

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

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

  4. webview长按保存图片

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

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

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

  6. h5页面长按保存图片

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

  7. Mui 长按保存图片

    必须先要 引入 mui.js,然后参考具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  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. 基于Alpha-Beta剪枝的欢乐斗地主残局辅助

    2019年4月17日更新: 将搜索主函数优化为局部记忆化搜索,再次提高若干倍搜索速度 更新了main和player,helper无更新 #include "Player-v3.0.cpp&q ...

  2. 阿里P8架构师讲述：3—5年程序员的发展和出路在哪里？

    工作3—5年后,程序员们的成长将迈入一个全新阶段.这既是程序员们的黄金时期同时又是最迷茫的时期,因为大家必须要要思考一下今后的职业方向. 3—5年程序员的发展和出路在哪里? 是继续做技术人,还是向管理 ...

  3. Linux系统 - 源码编译安装Nginx

    什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...

  4. IndexedDB 简单封装

    IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂. 当然浏览器数据存储 还有Lo ...

  5. Java 容器 & 泛型：六、容器讲到为什么要使用泛型

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket ArrayList是集合类中无处不在的,泛型也是,泛型对集合类尤其有用.但是为啥要使用泛型?理解好了这 ...

  6. Win32知识之窗口绘制.窗口第一讲

    Win32知识之窗口本质 一丶摘要 在学习Win32的时候. 很多操作都是窗口进行操作的.那么今天就说一下窗口的本质是什么. 窗口的本质是不断绘制.是windows通过消息机制进行绘制的. 我们知道. ...

  7. SQL Server 2008 R2 下如何清理数据库日志文件

    废话不多说,直接上代码,清理后日志文件为1M USE [master] GO ALTER DATABASE [数据库名] SET RECOVERY SIMPLE WITH NO_WAIT GO ALT ...

  8. date、sleep和usleep命令

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.1 date命令 date用于获取和设置操作系统的时间,还 ...

  9. hadoop小结

    测试小结:1.如果只需要对数据集进行过滤,筛选则只需要编写Mapper类,不需要Reduce类,此时要执行下面一条语句:job.setNumReduceTesk(0);2.如果需要对处理的数据进行分组 ...

  10. [翻译]一个新式的基于文本的浏览器 Browsh

    介绍 什么是Browsh? Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器.目前1 ,终端客户端比浏览器客户端更先进2. TTY 客户端 终端客户端即时更新和交付,以便于 ...