Mui 長按保存圖片

本文轉載自查看原文 2018-12-11 14:50 1595 mui/ Web前端

必須先要引入 mui.js，然后參考具體代碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <script type="text/javascript" src="js/mui.js"></script>
        <link rel="stylesheet" type="text/css" href="css/mui.css" />

        <script type="text/javascript">
            mui.init({
                gestureConfig: {
                    longtap: true   //默認為 false, 長按事件
                } 
            });

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

                    var bts = [{
                        title: "保存到手機"
                    }];
                    
                    /**
                     * actionSheet：彈出系統選擇按鈕框
                     */
                    plus.nativeUI.actionSheet({
                        cancel: "取消",
                        buttons: bts
                    }, function(e) {
                        
                        if(e.index > 0){
                            saveImage(target)
                        }
                    });

                });
            });
            
            /**
             * 1. 獲取圖片的鏈接
             * 2. 創建下載並下載圖片
             * 3. 保存至相冊
             */
            function saveImage(target) {
                var imgUrl = target.src;
                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("保存成功");

                    });
                });
                
                /**
                 * 開始下載任務
                 */
                try{
                    downLoader.start();
                }catch(e){
                    //TODO handle the exception
                    mui.toast("請長按圖片保存");
                }
            }

        </script>
    </head>

    <body>
        <div>
            <img src="http://cdnzzz.vcgeek.cn/forward@2x.png" alt="" />
        </div>
        <div>
            <h1>nnnnnn</h1>
        </div>
        
        <div>
            <img src="http://cdnzzz.vcgeek.cn/business@2x.png" alt="" />
        </div>
    </body>

</html>

注意：img 里面的 src 只能填寫網絡路徑，否則下載不了。

效果展示

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用mui實現長按保存圖片移動端，mui + h5 實現長按圖片保存到相冊長按保存圖片，或點擊按鈕保存 JS手機長按保存圖片 wap2app（七）-- 長按保存圖片 vue 長按圖片保存到本地禁止微信長按保存圖片微信小程序長按保存圖片 APP中的圖片如何長按可以下載並保存圖片到相冊 h5移動端禁止長按圖片保存

Mui 長按保存圖片

必須先要 引入 mui.js，然后參考具體代碼

注意：img 里面的 src 只能填寫網絡路徑，否則下載不了。

效果展示

免責聲明！

必須先要引入 mui.js，然后參考具體代碼