欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Mui 长按保存图片

程序员文章站 2022-05-31 14:39:02
...

必须先要 引入 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/aaa@qq.com" alt="" />
        </div>
        <div>
            <h1>nnnnnn</h1>
        </div>
        
        <div>
            <img src="http://cdnzzz.vcgeek.cn/aaa@qq.com" alt="" />
        </div>
    </body>

</html>

注意:img 里面的 src 只能填写网络路径,否则下载不了。
效果展示
Mui 长按保存图片

相关标签: mui