美文网首页
图片点击保存

图片点击保存

作者: 月光_薛 | 来源:发表于2018-01-05 15:46 被阅读0次

(在网上查的资料,然后自己又相应的进行了一写修改与测试,现在虽然看着简单,但自己也花费了一些时间,base64不可以进行使用这个方法,先转化成图片才可以保存,前端js我没找到这个方法,如果有知道的希望大家与我分享一下)
<script type="text/javascript" charset="utf-8">
mui.init(); //mui初始化
mui.plusReady(function() {
setImg("img1", "https://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_max.jpg");
});

    /*<img>设置图片
     *1.从本地获取,如果本地存在,则直接设置图片
     *2.如果本地不存在则联网下载,缓存到本地,再设置图片
     * */
    function setImg(imgId, loadUrl) {
            if (imgId == null || loadUrl == null) return;
            //图片下载成功 默认保存在本地相对路径的"_downloads"文件夹里面, 如"_downloads/logo.jpg"
            var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length);
            var relativePath = "_downloads/" + filename;
            //检查图片是否已存在
            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
                console.log("图片存在,直接设置=" + relativePath);
                //如果文件存在,则直接设置本地图片

// setImgFromLocal(imgId, relativePath);
setImgFromNet (imgId,loadUrl,relativePath);
}, function(e) {
console.log("图片不存在,联网下载=" + relativePath);
//如果文件不存在,联网下载图片
setImgFromNet (imgId,loadUrl,relativePath);
});
}

    /*给图片标签<img>设置本地图片
     * imgId 图片标签<img>的id
     * relativePath 本地相对路径 例如:"_downloads/logo.jpg"
     */
    function setImgFromLocal(imgId, relativePath) {
            //本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");
            var sd_path = plus.io.convertLocalFileSystemURL(relativePath);
            //给<img>设置图片
            console.log(sd_path)
            $id(imgId).setAttribute("src", sd_path);
        }

    /*联网下载图片,并设置给<img>*/
    function setImgFromNet (imgId,loadUrl,relativePath) {
        //先设置下载中的默认图片
        $id(imgId).setAttribute("src", "../images/loading.png");
        //创建下载任务
        var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {
            if (status == 200) {
                //下载成功
                console.log("下载成功=" + relativePath);
                plus.gallery.save(d.filename,function(){//保存到相册
                                    plus.io.resolveLocalFileSystemURL(d.filename,function(entry){
                                        entry.remove();//删除临时文件
                                    });
                                    return alert('图片已保存至相册');
                                }); 
                setImgFromLocal(imgId, d.filename);
            } else {
                //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在
                console.log("下载失败=" + status+"=="+relativePath);
                //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);
                if (relativePath!=null)
                    delFile(relativePath);
            }
        });
        //启动下载任务
        dtask.start();
    }

    /*根据id查找元素*/
    function $id(id) {
        return document.getElementById(id);
    }
</script>

相关文章

  • iPhone壁纸:6.20苹果高清壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:文字锁屏壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • 壁纸:08-18今日高清唯美壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:无水印壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:7.5苹果高清壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸 : 抖音动漫原图

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸 : 高清壁纸原图

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:全面屏壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:精选壁纸套图

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

  • iPhone壁纸:唯美壁纸

    长按保存 点击放大 iPhone手机壁纸(苹果(安卓)壁纸)保存方法:点击图片-长按图片-保存图片,保存完毕返回...

网友评论

      本文标题:图片点击保存

      本文链接:https://www.haomeiwen.com/subject/ltrsnxtx.html