使用mui實現長按保存圖片

首先初始化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

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章