wap2app（七）-- 長按保存圖片

時間 2019-11-12

標籤 wap2app wap app 保存圖片欄目 HTML 简体版

原文原文鏈接

用Hbuilder打包網站，在打包好的app中是沒法像網站那樣直接使用長按圖片保存的功能的，須要在網站裏對來自wap2app進行單獨處理，接下來介紹一下如何在Hbuilder打包後的app裏實現長按圖片的功能。javascript

1.在須要實現長按圖片保存的頁面引入相關css文件：css

<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/preview.css"/>

2.頁面引入相關js文件：html

<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>

3.將須要長按保存的圖片的img標籤加上屬性：data-preview-src="" data-preview-group="1"html5

<img src="images/2.jpg" data-preview-src="" data-preview-group="1" />

頁面代碼：java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>長按保存圖片</title>
        <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
        <link rel="stylesheet" type="text/css" href="css/preview.css"/>
        <style type="text/css">
            .photo-content{
                padding-top: 44px;
                background: #fff;
            }
            .content-padded{
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">長按保存圖片</h1>
        </header>
        <div class="photo-content" style="position: relative;">
            <div class="content-padded">
                <p>這是圖片放大預覽後長按保存圖片示例，點擊以下圖片可全屏預覽功能</p>
                <p>
                    <img src="images/1.jpg" data-preview-src="" data-preview-group="1" />
                </p>
                <p>圖片全屏預覽後，長按預覽圖片能夠保存到本地</p>
                <p>
                    <img src="images/2.jpg" data-preview-src="" data-preview-group="1" />
                </p>
                <p>第三張圖片</p>
                <p>
                    <img src="images/3.jpg" data-preview-src="" data-preview-group="1" />
                </p>
            </div>
        </div>
        <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/photosave.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

4.添加實現長按保存的js代碼：git

mui.init({
    gestureConfig: {
        longtap: true
    }
});

mui.previewImage();

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 && target.classList.contains('mui-zoom')) { //確保圖片連接不爲空
        var imgUrl = target.src;
        console.log('圖片地址：' + imgUrl);
        var suffix = cutImageSuffix(imgUrl);
        mui.confirm("是否保存此圖片", "", ["保存", "取消"], function(event) {
            var index = event.index;
            if(index == 0) {
                /**
                 * 建立下載任務
                 * http://www.html5plus.org/doc/zh_cn/downloader.html#plus.downloader.createDownload
                 */
                var downLoader = plus.downloader.createDownload(imgUrl, {
                    method: 'GET',
                    filename: '_downloads/image' + suffix
                }, function(download, status) {
                    var fileName = download.filename;
                    console.log('文件名:' + fileName);
                    console.log('下載狀態：' + status);
                    /**
                     * 保存至本地相冊
                     */
                    plus.gallery.save(fileName, function() {
                        /**
                         * 保存後，彈出對話框是否查看；
                         */
                        mui.confirm("打開相冊查看", "", ["打開", "取消"], function(event) {
                            var gindex = event.index;
                            if(gindex == 0) {
                                /**
                                 * 選擇圖片
                                 */
                                plus.gallery.pick(function(file) {
                                    mui.toast("你選擇了圖片：" + file);
                                }, function(error) {
                                    console.log(JSON.stringify(error));
                                }, {

                                });
                            }
                        });
                    });
                });
                /**
                 * 開始下載任務
                 */
                downLoader.start();
            }
        });
    }
}
// 截取圖片後綴用於重命名圖片，防止%E5%85%89%E6%98%8E%E8%A1%8C編碼的文件不被系統相冊識別；
function cutImageSuffix(imageUrl) {
    var index = imageUrl.lastIndexOf('.');
    return imageUrl.substring(index);
}