使用mui实现长按保存图片

转自：https://blog.csdn.net/qq_36676237/article/details/81533124

 

首先初始化mui（longtap是我们要用到的，longtap默认为false，如果没有初始化为true，则长按事件无效）

     mui.init( { gestureConfig:{
                tap: true, //默认为true
                doubletap: true, //默认为false
                longtap: true, //默认为false
                swipe: true, //默认为true
                drag: true, //默认为true
                hold:true,//默认为false，不监听
                release:false//默认为false，不监听
            }});

    //给需要长按保存图片的img标签设置 class='saveImg'
     var divs = document.getElementsByClassName('saveImg');
        for(var i = 0;i<divs.length;i++){
          divs[i].addEventListener('longtap', function () {
            //开启弹框
              mui('#picture').popover('toggle');
              var imgurl = this.src;
              document.getElementById('saveImg').addEventListener('tap', 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();
              });
       
          })
        }

    <-- 弹框的html-->
    <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>

ps：要引入mui的js和css

 

 

 

 

另一种方法：

<script type="text/javascript">
    mui.init({
        gestureConfig: {
            longtap: true
        }
    });



    mui.plusReady(function() {
        document.addEventListener('longtap', function(e) {
            var target = e.target;
            savePic(target);
        });
    });

    /**
     * 长按保存图片
     * 1. 获取图片链接
     * 2. 创建下载并下载图片
     * 3. 保存至相册
     */
    function savePic(target) {
        if(target.tagName == 'IMG' && target.currentSrc.length > 0 ) { //确保图片链接不为空
            var imgUrl = target.src;

            var suffix = cutImageSuffix(imgUrl);

            mui.confirm("是否保存此图片", "", ["保存", "取消"], function(event) {
                var index = event.index;
                if(index == 0) {
                    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("保存成功" );

                        });
                    });
                    /**
                     * 开始下载任务
                     */
                    downLoader.start();
                }
            });
        }
    }
    // 截取图片后缀用于重命名图片，防止%E5%85%89%E6%98%8E%E8%A1%8C编码的文件不被系统相册识别；
    function cutImageSuffix(imageUrl) {
        var index = imageUrl.lastIndexOf('.');
        return imageUrl.substring(index);
    }
</script>