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