移动端，mui + h5 实现长按图片保存到相册

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 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元的阿里云大礼包，快来领取吧~

移动端，mui + h5 实现长按图片保存到相册

推荐阅读