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">

<header class="trx_header clearfix">
    <h1>节日贺卡h1>
    <div class="fl trx_return"><a href="../page/personalCenter.html">a>div>
header>


<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>




<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>


<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){
            var poster = results[i];
            //appendHtml += '
  • '+poster.posterTitle+'

  • ';
    appendHtml +='
  • ' +'

    '+poster.posterTitle+'

    ' +'
  • '; } $("#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

    转载于:https://www.cnblogs.com/hedongfei/p/10685062.html

    你可能感兴趣的:(h5页面使用js实现保存当前图片到手机相册)