472 lines
21 KiB
JavaScript
472 lines
21 KiB
JavaScript
|
var tipPosition = "bottom"; //分享提示信息位置,middle,bottom
|
|||
|
|
var tipText="长按保存图片";
|
|||
|
|
var tipStyle="";
|
|||
|
|
var topInto="";
|
|||
|
|
|
|||
|
|
(function(window){
|
|||
|
|
if (tipPosition =="middle"){ //中间样式
|
|||
|
|
tipText = "长按保存图片";
|
|||
|
|
tipStyle = "tipsBtn";
|
|||
|
|
}else if (tipPosition =="bottom"){ //底部样式
|
|||
|
|
tipText = "点击图片，长按分享给好友";
|
|||
|
|
tipStyle ="buttomtips";
|
|||
|
|
}
|
|||
|
|
if (tipPosition =="bottom"){ //页面顶部信息
|
|||
|
|
topInto ='<div class="synthHead">'+
|
|||
|
|
' <img src="/h5/public/static/logo.png" style="width: 30px;height: 30px;" alt=""/>'+
|
|||
|
|
' <div>'+ $("#publishDateTime").text() +'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var designWidth = 750,
|
|||
|
|
maxWidth = 750,
|
|||
|
|
doc = document,
|
|||
|
|
win = window,
|
|||
|
|
docEl = doc.documentElement,
|
|||
|
|
remStyle = document.createElement("style"),
|
|||
|
|
tid;
|
|||
|
|
|
|||
|
|
function refreshRem() {
|
|||
|
|
var width = docEl.getBoundingClientRect().width;
|
|||
|
|
maxWidth = maxWidth || 540;
|
|||
|
|
width > maxWidth && (width = maxWidth);
|
|||
|
|
var rem = width * 100 / designWidth;
|
|||
|
|
var remnew = width / designWidth;
|
|||
|
|
// remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
|||
|
|
remStyle.innerHTML = 'html{font-size:' +62.5*remnew+'% !important;}';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (docEl.firstElementChild) {
|
|||
|
|
docEl.firstElementChild.appendChild(remStyle);
|
|||
|
|
} else {
|
|||
|
|
var wrap = doc.createElement("div");
|
|||
|
|
wrap.appendChild(remStyle);
|
|||
|
|
doc.write(wrap.innerHTML);
|
|||
|
|
wrap = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
|||
|
|
|
|||
|
|
win.addEventListener("resize", function () {
|
|||
|
|
clearTimeout(tid); //防止执行两次
|
|||
|
|
tid = setTimeout(refreshRem, 300);
|
|||
|
|
}, false);
|
|||
|
|
|
|||
|
|
win.addEventListener("pageshow", function (e) {
|
|||
|
|
if (e.persisted) { // 浏览器后退的时候重新计算
|
|||
|
|
clearTimeout(tid);
|
|||
|
|
tid = setTimeout(refreshRem, 300);
|
|||
|
|
}
|
|||
|
|
}, false);
|
|||
|
|
|
|||
|
|
if (doc.readyState === "complete") {
|
|||
|
|
doc.body.style.fontSize = "16px";
|
|||
|
|
} else {
|
|||
|
|
doc.addEventListener("DOMContentLoaded", function (e) {
|
|||
|
|
doc.body.style.fontSize = "16px";
|
|||
|
|
}, false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var PosterSplicing=function(selector){
|
|||
|
|
return new PosterSplicing.fn.init(selector)
|
|||
|
|
}
|
|||
|
|
var imagesNum = [1,2,4,8],//海报需要的图片数量
|
|||
|
|
logoSrc = "/h5/public/static/logo.png",//logo的图片
|
|||
|
|
posterTime= $("#publishDateTime").text(),//版面的日期
|
|||
|
|
haibaoImg = $.Deferred();//海报canvas生成的图片
|
|||
|
|
twoHorHaibaoImg = $.Deferred();//两张横向海报canvas生成的图片
|
|||
|
|
qrcodeImg = $.Deferred();//二维码canvas生成的图片
|
|||
|
|
imgUrlHeight = $.Deferred();//报纸的高度;
|
|||
|
|
|
|||
|
|
PosterSplicing.fn={
|
|||
|
|
show:function(value){//显示图片列表
|
|||
|
|
refreshRem();
|
|||
|
|
console.log('show');
|
|||
|
|
$("body").append('<div class="posterMask active"></div>')
|
|||
|
|
var posterHtml = '<div class="posterSplicingWrap">'+
|
|||
|
|
'<div class="closePoster"><i></i></div>'+
|
|||
|
|
'<div class="posterChoseWrap">';
|
|||
|
|
$(this).map((i,v)=>{
|
|||
|
|
if($(v)[0].currentSrc!=''){
|
|||
|
|
posterHtml += '<div class="item" id="images'+i+'">'+
|
|||
|
|
'<img class="itemPic" src="'+$(v)[0].currentSrc+'" alt=""/>'+
|
|||
|
|
'<div class="itemMask">'+
|
|||
|
|
'<i class="choseBtn"></i>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
posterHtml += '</div>'+
|
|||
|
|
'<div class="chosedBoxList">'+
|
|||
|
|
'<div class="chosedHead">'+
|
|||
|
|
'<p class="allPageBtn">一键拼图</p>'+
|
|||
|
|
// '<p class="tips">请选择1、2、4、8张图片</p>'+
|
|||
|
|
'<p class="tips">请选择版面，拼图分享</p>'+
|
|||
|
|
'<p class="chosedBtn">开始拼图</p>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="chosedPicList">'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'
|
|||
|
|
$('body').append(posterHtml);
|
|||
|
|
this.loading(false);
|
|||
|
|
$("body .posterSplicingWrap").on("click",".closePoster",function(){
|
|||
|
|
$('.posterSplicingWrap,.posterMask').remove();
|
|||
|
|
remStyle.innerHTML = 'html{font-size:initial}';
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
jigsawPuzzleBeginBtn:function(value){//开始拼图按钮数值变化
|
|||
|
|
if($("body .chosedBoxList .chosedPicList>.item").length>0){
|
|||
|
|
$("body .chosedBoxList .chosedBtn").addClass("active").html('开始拼图('+$("body .chosedBoxList .chosedPicList>.item").length+')');
|
|||
|
|
}else
|
|||
|
|
$("body .chosedBoxList .chosedBtn").removeClass("active").html('开始拼图');
|
|||
|
|
},
|
|||
|
|
choseImage:function(value){//选择海报需要图片
|
|||
|
|
if($('body .chosedBoxList .chosedPicList .item[chose-id="'+$(this).attr("id")+'"]').length>0){
|
|||
|
|
$('body .chosedBoxList .chosedPicList .item[chose-id="'+$(this).attr("id")+'"]').remove();
|
|||
|
|
$("body .posterChoseWrap").children("#"+$(this).attr("id")).removeClass("active");
|
|||
|
|
PosterSplicing.fn.jigsawPuzzleBeginBtn();
|
|||
|
|
}else{
|
|||
|
|
$("body .chosedBoxList .chosedPicList").append('<div class="item" chose-id="'+$(this).attr("id")+'">'+
|
|||
|
|
'<img class="itemPic" src="'+$(this).children(".itemPic").attr("src")+'" alt=""/>'+
|
|||
|
|
'<i class="choseBtn" chose-id="'+$(this).attr("id")+'"></i>'+
|
|||
|
|
'</div>');
|
|||
|
|
$("body .posterChoseWrap").children("#"+$(this).attr("id")).addClass("active");
|
|||
|
|
PosterSplicing.fn.jigsawPuzzleBeginBtn();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cancelImage:function(value){//取消选择的图片
|
|||
|
|
$("body .posterChoseWrap").children("#"+$(this).attr("chose-id")).removeClass("active");
|
|||
|
|
$(this).parents('.item').remove();
|
|||
|
|
PosterSplicing.fn.jigsawPuzzleBeginBtn();
|
|||
|
|
},
|
|||
|
|
choseWraringTips:function(value,text){//显示提示弹层
|
|||
|
|
var tipsHtml = '<div class="wraringWrapper"><div class="wraningBox">'+
|
|||
|
|
'<div class="title">提示</div>'+
|
|||
|
|
'<div class="tips">'+text+'</div>'+
|
|||
|
|
'<div class="btn">确定</div>'
|
|||
|
|
'</div></div>';
|
|||
|
|
$(".posterSplicingWrap").append(tipsHtml);
|
|||
|
|
},
|
|||
|
|
hideWraringTips:function(){//隐藏提示弹层
|
|||
|
|
$(".posterSplicingWrap .wraringWrapper").remove();
|
|||
|
|
},
|
|||
|
|
piecingTogether:function(){//点击拼图按钮
|
|||
|
|
var itemLength = $("body .chosedBoxList .chosedPicList>.item").length;
|
|||
|
|
if(itemLength==0){
|
|||
|
|
this.choseWraringTips(this,'请至少选择一张图片！');
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
//if(!imagesNum.includes(itemLength)){
|
|||
|
|
// this.choseWraringTips(this,'请选择1张、2张、4张或者8张图片！');
|
|||
|
|
// return ;
|
|||
|
|
//}
|
|||
|
|
var iamgesArry = [];
|
|||
|
|
$("body .chosedBoxList .chosedPicList>.item").map((i,v)=>{
|
|||
|
|
iamgesArry.push($(v).children('img').attr("src"))
|
|||
|
|
});
|
|||
|
|
this.loading(true);
|
|||
|
|
switch(itemLength){
|
|||
|
|
case 1:
|
|||
|
|
this.onePoster(iamgesArry)
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
this.twoPoster(iamgesArry)
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.fourPoster(iamgesArry)
|
|||
|
|
break;
|
|||
|
|
case 8:
|
|||
|
|
this.eightPoster(iamgesArry)
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
this.twoPoster(iamgesArry)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
piecingTogetherAll:function(){//点击一键拼图按钮，全部拼图
|
|||
|
|
this.loading(true);
|
|||
|
|
var iamgesArry = [];
|
|||
|
|
$("body .posterChoseWrap>.item").map((i,v)=>{
|
|||
|
|
iamgesArry.push($(v).children('img').attr("src"))
|
|||
|
|
});
|
|||
|
|
this.twoPoster(iamgesArry);
|
|||
|
|
},
|
|||
|
|
onePoster:function(value){//一张拼图
|
|||
|
|
var onePosterHtml='<div class="posterWrapper">'+
|
|||
|
|
'<div class="closeBtn"><i></i></div>'+
|
|||
|
|
'<div class="originalWrapper onePoster" id="originalWrapper">'+
|
|||
|
|
'<div class="defalutLayoutPoster">'+topInto+
|
|||
|
|
'<div class="imageBox">'+
|
|||
|
|
'<img class="imgPic" src="'+value[0]+'" alt=""/>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="footer">'+
|
|||
|
|
'<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
|
|||
|
|
'<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
|
|||
|
|
'<div class="code" id="qrcode"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div id="newPosterWrapper" class="newPosterWrapper">'+
|
|||
|
|
'<img src="" alt=""/>'+
|
|||
|
|
'<div class="'+ tipStyle +'">'+tipText+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
$(".posterSplicingWrap").append(onePosterHtml);
|
|||
|
|
setTimeout(function(){
|
|||
|
|
codeImg("originalWrapper","newPosterWrapper");
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
twoPoster:function(value){//两张拼图
|
|||
|
|
var fourImages = '';
|
|||
|
|
value.map((v,i)=>{
|
|||
|
|
fourImages += '<div class="imageBox">'+
|
|||
|
|
'<img class="imgPic" src="'+v+'" alt=""/>'+
|
|||
|
|
'</div>'
|
|||
|
|
});
|
|||
|
|
var twoPosterHtml='<div class="posterWrapper" style="padding-bottom:26rem">'+
|
|||
|
|
'<div class="closeBtn"><i></i></div>'+
|
|||
|
|
'<div class="verticalPoster active">'+
|
|||
|
|
'<div class="originalWrapper onePoster" id="originalWrapper">'+
|
|||
|
|
'<div class="defalutLayoutPoster">'+topInto+
|
|||
|
|
fourImages +
|
|||
|
|
'<div class="footer">'+
|
|||
|
|
'<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
|
|||
|
|
'<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
|
|||
|
|
'<div class="code" id="qrcode"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div id="newPosterWrapper" class="newPosterWrapper">'+
|
|||
|
|
'<img src="" alt=""/>'+
|
|||
|
|
'<div class="'+ tipStyle +'">'+tipText+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="horizontalPoster">'+
|
|||
|
|
'<div class="originalWrapper " id="horOriginalWrapper">'+
|
|||
|
|
'<div class="defalutLayoutPoster">'+topInto+
|
|||
|
|
fourImages +
|
|||
|
|
'<div class="footer">'+
|
|||
|
|
'<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
|
|||
|
|
'<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
|
|||
|
|
'<div class="code" id="qrcodeHor"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div id="newHorPosterWrapper" class="newPosterWrapper">'+
|
|||
|
|
'<img src="" alt=""/>'+
|
|||
|
|
'<div class="'+ tipStyle +'">'+tipText+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="choseDirectionBox">'+
|
|||
|
|
'<div class="left active" type="verticalPoster"></div>'+
|
|||
|
|
'<div class="right" type="horizontalPoster"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
$(".posterSplicingWrap").append(twoPosterHtml);
|
|||
|
|
$("body .choseDirectionBox>item");
|
|||
|
|
setTimeout(function(){
|
|||
|
|
codeImg("originalWrapper","newPosterWrapper");
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
$("body .choseDirectionBox").on("click",".left",function(){
|
|||
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|||
|
|
$("body .verticalPoster").addClass("active").siblings(".horizontalPoster").removeClass("active");
|
|||
|
|
});
|
|||
|
|
$("body .choseDirectionBox").on("click",".right",function(){
|
|||
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|||
|
|
$("body .horizontalPoster").addClass("active").siblings(".verticalPoster").removeClass("active");
|
|||
|
|
if($("#newHorPosterWrapper img").attr("src")==""){
|
|||
|
|
setTimeout(function(){
|
|||
|
|
codeImg("horOriginalWrapper","newHorPosterWrapper");
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fourPoster:function(value){//四张拼图
|
|||
|
|
var fourImages = '';
|
|||
|
|
value.map((v,i)=>{
|
|||
|
|
fourImages += '<div class="imageBox">'+
|
|||
|
|
'<img class="imgPic" src="'+v+'" alt=""/>'+
|
|||
|
|
'</div>'
|
|||
|
|
});
|
|||
|
|
var fourPosterHtml='<div class="posterWrapper">'+
|
|||
|
|
'<div class="closeBtn"><i></i></div>'+
|
|||
|
|
'<div class="originalWrapper fourPoster" id="originalWrapper">'+
|
|||
|
|
'<div class="defalutLayoutPoster">'+topInto+
|
|||
|
|
fourImages +
|
|||
|
|
'<div class="footer">'+
|
|||
|
|
'<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
|
|||
|
|
'<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
|
|||
|
|
'<div class="code" id="qrcode"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div id="newPosterWrapper" class="newPosterWrapper">'+
|
|||
|
|
'<img src="" alt=""/>'+
|
|||
|
|
'<div class="'+ tipStyle +'">'+tipText+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
$(".posterSplicingWrap").append(fourPosterHtml);
|
|||
|
|
setTimeout(function(){
|
|||
|
|
codeImg('originalWrapper',"newPosterWrapper");
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
eightPoster:function(value){//八张拼图
|
|||
|
|
var eightImages = '';
|
|||
|
|
value.map((v,i)=>{
|
|||
|
|
if(i==4){
|
|||
|
|
eightImages += '<div class="imageBox">'+
|
|||
|
|
'<div class="code" id="qrcode"></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="imageBox">'+
|
|||
|
|
'<img class="imgPic" src="'+v+'" alt=""/>'+
|
|||
|
|
'</div>'
|
|||
|
|
}else
|
|||
|
|
eightImages += '<div class="imageBox">'+
|
|||
|
|
'<img class="imgPic" src="'+v+'" alt=""/>'+
|
|||
|
|
'</div>'
|
|||
|
|
});
|
|||
|
|
var eightPoster='<div class="posterWrapper">'+
|
|||
|
|
'<div class="closeBtn"><i></i></div>'+
|
|||
|
|
'<div class="originalWrapper eightPoster" id="originalWrapper">'+
|
|||
|
|
'<div class="defalutLayoutPoster">'+topInto+
|
|||
|
|
eightImages +
|
|||
|
|
'<div class="footer">'+
|
|||
|
|
'<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
|
|||
|
|
'<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div id="newPosterWrapper" class="newPosterWrapper">'+
|
|||
|
|
'<img src="" alt=""/>'+
|
|||
|
|
'<div class="'+ tipStyle +'">'+tipText+'</div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>';
|
|||
|
|
$(".posterSplicingWrap").append(eightPoster);
|
|||
|
|
setTimeout(function(){
|
|||
|
|
codeImg('originalWrapper',"newPosterWrapper");
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
closePosterGenerate:function(){//关闭生成的海报层
|
|||
|
|
$(".posterSplicingWrap .posterWrapper").remove();
|
|||
|
|
haibaoImg = $.Deferred();
|
|||
|
|
twoHorHaibaoImg = $.Deferred();
|
|||
|
|
},
|
|||
|
|
loading:function(value){//loading显示隐藏
|
|||
|
|
if(value){
|
|||
|
|
$(".posterMask").addClass('active');
|
|||
|
|
}else{
|
|||
|
|
$(".posterMask").removeClass('active');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var init = PosterSplicing.fn.init = function(selector){
|
|||
|
|
var slice = Array.prototype.slice
|
|||
|
|
var dom = slice.call($('.'+selector))
|
|||
|
|
console.log('进入',dom)
|
|||
|
|
var i, len = dom ? dom.length : 0
|
|||
|
|
for (i = 0; i < len; i++) {
|
|||
|
|
this[i] = dom[i]
|
|||
|
|
}
|
|||
|
|
this.length = len
|
|||
|
|
this.selector = selector || ''
|
|||
|
|
}
|
|||
|
|
init.prototype = PosterSplicing.fn;
|
|||
|
|
|
|||
|
|
window.POSTER = PosterSplicing
|
|||
|
|
|
|||
|
|
//点击事件
|
|||
|
|
//选择图片
|
|||
|
|
$('body').on('click','.posterChoseWrap .item',function(){
|
|||
|
|
PosterSplicing.fn.choseImage.apply(this)
|
|||
|
|
});
|
|||
|
|
//取消选择的图片
|
|||
|
|
$('body').on('click','.chosedPicList .item .choseBtn',function(){
|
|||
|
|
PosterSplicing.fn.cancelImage.apply(this)
|
|||
|
|
});
|
|||
|
|
$('body').on('click','.chosedBoxList .chosedBtn',function(){
|
|||
|
|
PosterSplicing.fn.piecingTogether(this)
|
|||
|
|
});
|
|||
|
|
$('body').on('click','.chosedBoxList .allPageBtn',function(){
|
|||
|
|
PosterSplicing.fn.piecingTogetherAll(this)
|
|||
|
|
});
|
|||
|
|
//提示
|
|||
|
|
$('body').on('click','.wraningBox .btn',function(){
|
|||
|
|
PosterSplicing.fn.hideWraringTips(this)
|
|||
|
|
});
|
|||
|
|
//关闭生成的海报
|
|||
|
|
$('body').on('click','.posterWrapper .closeBtn i',function(){
|
|||
|
|
PosterSplicing.fn.closePosterGenerate(this)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//二维码生成图片
|
|||
|
|
function codeImg(psterBox,newPosterBox){
|
|||
|
|
var url = window.location.href;
|
|||
|
|
url = url.indexOf("?")<0?url+"?v=10000":url;
|
|||
|
|
$('body').find('#qrcode').qrcode({ width: 150,height:150,correctLevel:0,render:"table",margin:'0 auto', text:url});
|
|||
|
|
synthesisImg('qrcode',qrcodeImg);//生成二维码
|
|||
|
|
$.when(qrcodeImg).done(function ( v1 ) {
|
|||
|
|
$('body').find('#qrcode').addClass('active').html('<img src="'+v1+'" alt="" />');
|
|||
|
|
if($("body").find("#qrcodeHor")){
|
|||
|
|
$('body').find('#qrcodeHor').addClass('active').html('<img src="'+v1+'" alt="" />');
|
|||
|
|
}
|
|||
|
|
//loadImage();//报纸图片加载
|
|||
|
|
synthesisImgLoad(psterBox,newPosterBox);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//图片加载完成后生成海报
|
|||
|
|
function synthesisImgLoad(psterBox,newPosterBox){
|
|||
|
|
if(newPosterBox=='newHorPosterWrapper'){
|
|||
|
|
synthesisImg(psterBox,twoHorHaibaoImg);//生成海报
|
|||
|
|
$.when(twoHorHaibaoImg).done(function ( v1) {
|
|||
|
|
$('#'+newPosterBox+' img').attr('src',v1);
|
|||
|
|
$('#'+psterBox).hide();
|
|||
|
|
PosterSplicing.fn.loading(false)
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
synthesisImg(psterBox,haibaoImg);//生成海报
|
|||
|
|
$.when(haibaoImg).done(function ( v1) {
|
|||
|
|
$('#'+newPosterBox+' img').attr('src',v1);
|
|||
|
|
$('#'+psterBox).hide();
|
|||
|
|
PosterSplicing.fn.loading(false);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//生成图片
|
|||
|
|
function synthesisImg(sourceHtml,canvasImg) {
|
|||
|
|
//clearInterval(synthesisImgLoad)
|
|||
|
|
var canvas = document.createElement('canvas') // 创建一个canvas节点
|
|||
|
|
var shareContent = document.getElementById(sourceHtml) // 需要截图的包裹的（原生的）DOM 对象
|
|||
|
|
var width = shareContent.offsetWidth // 获取dom 宽度
|
|||
|
|
var height = shareContent.offsetHeight // 获取dom 高度
|
|||
|
|
var scale = 2 // 定义任意放大倍数 支持小数
|
|||
|
|
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
|
|||
|
|
var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
|
|||
|
|
html2canvas(document.getElementById(sourceHtml),{
|
|||
|
|
x: rect.left, // 绘制的dom元素相对于视口的位置
|
|||
|
|
y: rect.top,
|
|||
|
|
width: width, // dom 原始宽度
|
|||
|
|
height: height,
|
|||
|
|
windowWidth: document.body.scrollWidth,
|
|||
|
|
windowHeight: document.body.scrollHeight,
|
|||
|
|
// x: 0,
|
|||
|
|
// y: 0,
|
|||
|
|
useCORS: true, // 开启跨域
|
|||
|
|
dpi: window.devicePixelRatio * 2,
|
|||
|
|
scale: scale, // 添加的scale 参数
|
|||
|
|
}).then((canvas)=>{
|
|||
|
|
var context = canvas.getContext('2d')
|
|||
|
|
//关闭抗锯齿
|
|||
|
|
context.mozImageSmoothingEnabled = false
|
|||
|
|
context.msImageSmoothingEnabled = false
|
|||
|
|
context.imageSmoothingEnabled = false
|
|||
|
|
canvasImg.resolve(canvas.toDataURL());
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})(window)
|