使用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>