移動端，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元的阿里雲大禮包，快來領取吧~