移動端，mui + h5 實現長按圖片保存到相冊

送您一個最高1888元的阿里雲大禮包，快來領取吧~

1.頁面引入mui的js和css  ，初始化mui時將longtap（長按事件）放開

<script type="text/javascript"> mui.init({ swipeBack: false, //啓用右滑關閉功能, gestureConfig: { longtap: true, //默認爲false release: false //默認爲false，不監聽 } }); //開啓預覽圖片 mui.previewImage(); mui.plusReady(function() { imageDetail.init(); }) </script>

2.html頁面

　　　　　　　<template id="imgs"> {{each imgList item i}} <li class="mui-table-view-cell mui-media mui-col-xs-4" data-imgurl ="{{item.imgUrl}}">//點擊的li
                    <a href="#">
                        <img class="mui-media-object" style="width:100px;height:100px;" data-preview-src="" data-preview-group="2" src={{item.imgUrl}}> </a>
                    <span id="" class="id_span">{{item.createTime|datefomate}}</span>
                </li> {{/each}} </template>

<!--彈框的div-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存圖片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>

3.js   

 mui("li").off().on('tap', "#saveImg", function(){};解決點擊事件衝突，屢次觸發，重複保存圖片

　　　　　　　　　　　　//長按圖片觸發事件 mui("#imgsul").on('longtap', "li", function() { //alert(this.dataset.imgurl); //開啓彈框 mui('#picture').popover('toggle'); var imgurl = this.dataset.imgurl; mui("li").off().on('tap', "#saveImg", function() { var imgDtask = plus.downloader.createDownload(imgurl, { // method: 'GET' }, function(d, status) { if(status == 200) { plus.gallery.save(d.filename, function() { //保存到相冊 plus.io.resolveLocalFileSystemURL(d.filename, function(enpty) { // 關閉彈框 mui('#picture').popover('toggle'); mui.toast('保存成功') }); }) } else { mui.toast('保存失敗') } }); imgDtask.start(); }); })

送您一個最高1888元的阿里雲大禮包，快來領取吧~