Mui 长按保存图片

时间：2018-12-11 15:50:28 阅读：306 评论：0 收藏：0 [点我收藏+]

标签：ext 下载图片 class art ati alt func 代码 ESS

技术分享图片

必须先要引入 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>