Mui 长按保存图片

必须先要 引入 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 长按保存图片的更多相关文章
- wap2app(七)-- 长按保存图片
用Hbuilder打包网站,在打包好的app中是无法像网站那样直接使用长按图片保存的功能的,需要在网站里对来自wap2app进行单独处理,接下来介绍一下如何在Hbuilder打包后的app里实现长按图 ...
- 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 ...
- 上传图片,图片过大压缩处理以及解决自拍时会出现图片横屏的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' , ...
随机推荐
- 【ASP.NET基础--MVC】MVC视图基础语法学习
初步接触.net MVC的视图语法,很多东西都不太熟悉,感觉跟之前的aspx以及html都有一些区别,最近看别人的代码,一边看一边研究,现把学到的东西在这里记录一下,以便日后翻阅. 第一部分:基础知识 ...
- 【ADO.NET基础-Regidter】简单的账户注册界面和源代码(可用于简单面试基础学习用)
在阅读时如有问题或者建议,欢迎指出和提问,我也是初学者......... 前台代码: <!DOCTYPE html> <html xmlns="http://www.w3. ...
- IntelliJ IDEA 如何在同一个窗口创建多个项目--超详细教程
一.IntelliJ IDEA与Eclipse的区别 二.在同一个窗口创建多个项目 1.打开IntelliJ IDEA,点击Create New Project 2.Java Enterprise-- ...
- at,crontab例行性任务
at:仅执行一次就结束的调度命令 at [-mldvc] TIME -m:当at的工作完成后,即使没有输出信息,也会以email的方式通知用户工作已完成 -l:相当于atq,列出系统上所有该用户的at ...
- 1046 Shortest Distance (20 分)
1046 Shortest Distance (20 分) The task is really simple: given N exits on a highway which forms a si ...
- Python3实战spark大数据分析及调度 ☝☝☝
Python3实战spark大数据分析及调度 ☝☝☝ 一.实例分析 1.1 数据 student.txt 1.2 代码 二.代码解析 2.1函数解析 2.1.1 collect() RDD的特性 在 ...
- 第二章Java内存区域与内存溢出异常
第二章 Java内存区域与内存溢出异常 一.概述 对与Java程序员来说,在虚拟机自动内存管理机制的帮助下,不再需要为每个new操作去写delete/free代码,不容易出现内存泄露和内存溢出问 题, ...
- Spring Cloud Gateway的动态路由怎样做?集成Nacos实现很简单
一.说明 网关的核心概念就是路由配置和路由规则,而作为所有请求流量的入口,在实际生产环境中为了保证高可靠和高可用,是尽量要避免重启的,所以实现动态路由是非常有必要的:本文主要介绍 Spring Clo ...
- 攻防世界(XCTF)逆向部分write up(一)
晚上做几个简单的ctf逆向睡的更好 logmein elf文件 ida看看main函数伪代码 void __fastcall __noreturn main(__int64 a1, char **a2 ...
- Cobalt Strike之信息收集、木马钓鱼
System Profiler使用 System Profiler 模块,搜集目标的各类机器信息(操作系统版本,浏览器版本等) Attacks->web drive-by->System ...