h5页面使用js实现保存当前图片到手机相册

很可惜，这个鬼东西微信内置浏览器不适用

页面：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>节日贺卡</title>
    <link rel="stylesheet" href="../css/common.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/main.css" type="text/css" media="screen"/>
    <script src="../js/init.js"></script>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/wxshare.js" ></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<link rel="icon" type="image/png" href="../img/icon.png">
</head>
<body class="bodybgfff">
<!-- 头部start -->
<header class="trx_header clearfix">
    <h1>节日贺卡</h1>
    <div class="fl trx_return"><a href="../page/personalCenter.html"></a></div>
</header>
<!-- 头部搜索end -->
<!-- 海报start -->
<input type="hidden" id="posterType" value="02"/>
<div class="my_haibao">
    <ul class="haibao-list" id="my_poster_id">

    </ul>
</div>
<img style="display:none" class="qdb_nocotent no_search_data" src="../img/search_no.png" alt="" >
<p style="display:none" class="search_not_text no_search_data">暂时木有海报哦</p>
<!-- 海报end -->


<!-- 弹出层end -->
<div class="mark" ></div>
<div class="haibao-show">
    <span class="btn-close-haibao"></span>
    <img src="img/app-down-bg.jpg" alt="" id="picurl"/>
    <p id="successHint" style="display:none">图片已保存到相册，可分享给好友</p>
    <p id="failHint" style="display:none">图片保存失败</p>
    <a href="#" onclick="javascript:savePic();">保存到相册</a>
</div>

<!-- 分享二维码end -->
<script src="../js/model/myPosterList.js"></script>
</body>
</html>

js:

/**
 * Created by wwj on 2019/03/11.
 */
$(document).ready(function(){
    pageShow = 9;
    nowPage = 1;
    loadDataId="my_poster_id";
    /*var url = window.basePath + "/h5/front/poster/toPoster";
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        data: {},
        success: function (rest) {
            $("#salesmanUuid").val(rest.data.salesmanUuid);
        }
    })*/

    pageCallBack()
});
function pageCallBack(){
    loadPosterContent();
}
function loadPosterContent(){
    var storeNo = getSessionStoreNo();
    var posterType = $("#posterType").val();
    var url = window.basePath + "/h5/front/poster/ajaxSearchPoster";
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: {currentPage: nowPage,pageShow:pageShow,storeNo:storeNo,posterType:posterType},
        success: function (rest) {
            console.log(rest)
            if(rest.result){
                appendPosterResult(rest);
            }else{
                $(".no_search_data").show();
            }
            console.log('start')
        }
    })
}
//拼接加载出来的产品
function appendPosterResult(data){
    var results = data.results;
    if(results!=null&&results.length>0){
        var appendHtml = "";
        for(var i=0;i<results.length;i++){
            var poster = results[i];
            //appendHtml += '<li><a href="javascript:void(0);" onclick="toPosterPage(\''+poster.uuid+'\',\''+poster.posterTitle+'\')"><img src="'+poster.posterImgUrl+'" alt=""/><p>'+poster.posterTitle+'</p></a></li>';
            appendHtml +='<li>'
                        +'<a href="#"><img src="'+poster.posterImgUrl+'" alt=""/><p>'+poster.posterTitle+'</p></a>'
                       +'</li>';
        }
        $("#my_poster_id").append(appendHtml);
        $(".no_search_data").hide();
    }else{
        if(nowPage==1){
            totalPage = data.totalPage;
            $(".no_search_data").show();
        }
    }
    nowPage++;
    initPreviewJs();
}


//初始化图片预览效果js
function initPreviewJs(){
       $(".haibao-list li img").click(function(){
            var imgSrc = $(this)[0].src;
            $(".mark").fadeIn();
            $(".haibao-show").fadeIn().children("img").attr("src",imgSrc);
            
        })

    $(".btn-close-haibao,.mark").click(function(){
            $(".mark").fadeOut();
            $(".haibao-show").fadeOut();
            $("#successHint").hide();
            $("#failHint").hide();
            
        })
}

//保存到相册
function savePic(){         
    var picurl= $("#picurl").attr("src");
    //alert(picurl);
    savePicture(picurl);
}




var triggerEvent = "touchstart";
function savePicture(Url){
    var blob=new Blob([''], {type:'application/octet-stream'});
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = Url;
    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
    URL.revokeObjectURL(url);
}

参考博客：https://blog.csdn.net/rentian1/article/details/84988590

h5页面使用js实现保存当前图片到手机相册

猜你喜欢