必須先要 引入 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/[email protected]" alt="" />
</div>
<div>
<h1>nnnnnn</h1>
</div>
<div>
<img src="http://cdnzzz.vcgeek.cn/[email protected]" alt="" />
</div>
</body>
</html>
注意：img 裏面的 src 只能填寫網絡路徑，否則下載不了。
效果展示
