wap2app（七）-- 长按保存图片
用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="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="images/1.jpg" data-preview-src="" data-preview-group="1" /> </p> <p>图片全屏预览后，长按预览图片可以保存到本地</p> <p> <img src="images/2.jpg" data-preview-src="" data-preview-group="1" /> </p> <p>第三张图片</p> <p> <img src="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【转载】,谢谢！
