用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. Xamarin.Android 利用Fragment实现底部菜单

    效果图: 第一步:添加引用 引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包. 第二步:绘制Main和Fragment界面 fg_home. ...

  2. SVN+Axure版本管理&协同设计(一)

    1. SVN介绍 2.安装部署 环境介绍:Ubuntu16

  3. 使用Docker发布DNC项目

    项目结构 可以忽略中间三个Console项目 ApiCenter 是一个WebAPI项目,引用了NLog.MQ项目 ApiCenter使用5001端口 public static IWebHost B ...

  4. [Jenkins][Git]ssh原理以及与https的区别

    -------------------------------------------------------------------- 本文参考多篇文章结合自身情况完成,可自由转载,需保留本文出处! ...

  5. karma测试实践

    karma是Google团队开发的一套前端测试运行框架,它不同于测试框架(jasmine,mocha等),它运行在这些测试框架之上,主要完成的工作有: 1.karma启动一个web服务器,生成包含js ...

  6. Python快速学习08:模块的操作

    前言 系列文章:[传送门] 天气干燥,我就上火,流鼻血.希望身子好起来. 正文 函数和对象都是为了更好的组织已经有的程序,以方便重复利用. 模块(module)也是为了同样的目的.模块可以包含可执行代 ...

  7. 【原创】STM32工程新建步骤

    1. 新建文件夹          DOC文件夹:        可以存放readme.txt等项目文档     Library文件夹:    可以存放ST库源码,直接复制ST库的源代码到Librar ...

  8. 使用Laya引擎开发微信小游戏(上)

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

  9. easyui datagrid列显示图片

    表格头 显示图片 jquery

  10. vue_drf之实现极验滑动验证码

    一.需求 1,场景 我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...