Mui 长按保存图片

Posted 2021-01-26 zyulike

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Mui 长按保存图片相关的知识，希望对你有一定的参考价值。

技术分享图片

必须先要引入 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/[email protected]" alt="" />
        </div>
        <div>
            <h1>nnnnnn</h1>
        </div>
        
        <div>
            <img src="http://cdnzzz.vcgeek.cn/[email protected]" alt="" />
        </div>
    </body>

</html>

注意：img 里面的 src 只能填写网络路径，否则下载不了。

效果展示

技术分享图片

以上是关于Mui 长按保存图片的主要内容，如果未能解决你的问题，请参考以下文章

ios中，长按Webview中的图片

html5 微信公众号长按图片没有弹出发送给朋友，显示的是保存图片

canvas绘制图片，实现在微信里长按保存图片

ios怎么保存别人回答给你的图片？长按了图片没有用。

苹果手机在百度知道上长按不能保存图片，请问怎么才能保存

Mui 长按保存图片

必须先要 引入 mui.js，然后参考具体代码

注意：img 里面的 src 只能填写网络路径，否则下载不了。

效果展示

必须先要引入 mui.js，然后参考具体代码