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>
html手机网站<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/base.js"></script>
<script src="../js/wxshare.js"></script>
<script src="res.wx.qq/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 class="qdb_nocotent no_search_data" src="../img/search_no.png" alt="">
<p 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" >图⽚已保存到相册，可分享给好友</p>
<p id="failHint" >图⽚保存失败</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)
sult){
appendPosterResult(rest);
}else{
$(".no_search_data").show();
}
console.log('start')
}
})
}
//拼接加载出来的产品
function appendPosterResult(data){
var results = sults;
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 = alPage;
$(".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 = ateObjectURL(blob);
var a = ateElement('a');
a.href = Url;
a.download = place(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
var e = ateEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。