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="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(七)-- 长按保存图片的更多相关文章
- Swift版本UIWebView长按保存图片
起因 最近需要做个IOS的壳子,用到长按保存图片的功能,发现百度出来的全是OC语法的例子,很多都不是全面,只能自己写一份Swift版本的,图片下面附上Github地址 效果图 Github地址:htt ...
- Android WebView Long Press长按保存图片到手机
<span style="font-size:18px;">首先要先注册长按监听菜单 private String imgurl = ""; /** ...
- WebView长按保存图片;WebView不跳转到系统的浏览器;WebView加载显示进度条;WebView返回事件处理;
直接看代码即可,代码里面注释写的很清楚,这个类拉下来就能用: 写法和命名比较粗暴,但也简单易懂: public class MainActivity extends AppCompatActivity ...
- webview长按保存图片
private String imgurl = ""; /*** * 功能:长按图片保存到手机 */ @Override public void onC ...
- 微信小程序--预览previewImage(长按保存图片)
最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...
- h5页面长按保存图片
由于之前几乎没有使用过canvas:今天遇到了一个很棘手的问题.canvas生成后,然后长按保存到手机. 正常的流程应该是先用canvas进行画图,然后再把canvas转成地址,最后再把转化的地址给i ...
- Mui 长按保存图片
必须先要 引入 mui.js,然后参考具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 上传图片,图片过大压缩处理以及解决自拍时会出现图片横屏的bug修复、长按保存图片
js部分:module.exports = { resize: function (file, callback, options) { //配置 options = Object.assign({ ...
- wap2app(九)-- 使用mui.previewImage之后,页面a链接不能跳转
使用Hbuilder的长按保存图片的预览图片之后,页面所有的a链接都不能跳转. 解决办法: 可以使用下面绑定tap利用js跳转,亲测有效. mui('body').on( 'tap' , 'a' , ...
随机推荐
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- MRO
在Python3里面,有多继承的时候,往往会出现调用Super失败的情况.Python里存在一种多继承 Super的调用顺序(C3算法),保证每个类调用一次. 体现:类名.__mro__ 使用Supe ...
- 课程五(Sequence Models),第二 周(Natural Language Processing & Word Embeddings) —— 1.Programming assignments:Operations on word vectors - Debiasing
Operations on word vectors Welcome to your first assignment of this week! Because word embeddings ar ...
- oracle批量去掉字段值空格
--查询验证 select ltrim(col1) from t1; --去掉字段值左边空格update t1 set col1=ltrim(col1); --去掉字段值右边空格update t1 s ...
- sql server 性能调优之 资源等待内存瓶颈的三种等待类型
一.概述 这篇介绍Stolen内存相关的主要三种等待类型以及对应的waittype编号,CMEMTHREAD(0x00B9),SOS_RESERVEDMEMBLOCKLIST(0x007B),RESO ...
- sql server 索引阐述系列五 索引参数与碎片
-- 创建聚集索引 create table [dbo].[pub_stocktest] add constraint [pk_pub_stocktest] primary key clustered ...
- Springboot 启动详解
1.前言 最近一直在看Springboot和springcloud代码,看了将近20多天,对这两个系统的认知总算是入了门.后续应该会有一个系列的文章,本文就先从Springboot的启动入手. 2.容 ...
- 解决AssetBundle包加载预制体时,Shader显示异常的问题
现象: 预制体上的粒子效果显示为紫色方块. 原因:shader在打成AB包后与指定平台产生相关性,Editor中无法正常读取. 解决办法: 遍历所有加载的对象,重新赋值Shader 代码: //修正s ...
- 关于JBoss7.X修改post传输数据量(max-post-size)的问题
转自: https://blog.csdn.net/zhangyunhao108/article/details/53140569 JBoss7.X修改max-post-size在网上百度了好久,都不 ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...