gushidianzibao-h5/public/static/js/bigHaiBao.js

//下载弹层
function bigHaibao() {
	var imgUrl = $('.swiper-wrapper .swiper-slide-active img').attr('src') + '?=v1';
	var date =$("#publishDateTime").html();
	var week = getWeekBig($("#NewsArticleTime").html());   //星期
	console.log($("#publishDateTime").html());
	var html =
		'<div class="closeBtn"><i></i></div>' +
		'<div id="synthWrap" style="width:1500px; position:absolute; top:-100000px; max-height:max-content; padding:30px;">' +
		'	<div class="synthHead" style="height:80px; margin-bottom:30px; font-size:48px;line-height:80px;">' +
		'		<img src="/h5/public/static/logo.png" style="height: 50px;width: 50px" alt=""/>' +
		'		<div>' + date +'&nbsp;&nbsp;&nbsp;' + week +'</div>' +
		'	</div>' +
		'	<img src = ' + imgUrl +' class="synthPaper" alt=""/>' +
		'	<div class="footer" style="height:180px; padding:30px 0;font-size:48px; margin-top:30px;">' +
		'		<div class="left">' +
		'			<img style="max-height:150px;max-width:150px;" src="/h5/public/static/logo.png" alt=""/>' +
		'		</div>' +
		'		<div class="right">' +
		'			<div class="text">' +
		'				<div>识别二维码</div>' +
		'				<div>查看该版内容</div>' +
		'			</div>' +
		'			<div class="qr" style="width:180px; height:180px; margin-left:30px;">' +
		'				<img src="" id="qcImg"/>' +
		'			</div>' +
		'		</div>' +
		'	</div>' +
		'</div>' +
		'<div id="synthImg"><img src="" alt=""/></div>' +
		'<div class="saveTipsBtn" style="display:none;">点击图片，长按分享给好友</div>' +
		'<div class="synthmask"><img src="/h5/public/static/loading.gif" alt=""/></div>' +
		'<div id="qrcode" style="visibility:hidden;"></div>';

	$('.synthPage').append(html);
	var url = window.location.href;
	var index = url.substring(0, url.lastIndexOf('/') + 1);
	console.log(index + '?' + getCaption())
	$('body').find('#qrcode').qrcode({
		render: 'canvas',
		width: 180,
		height: 180,
		// margin: '0 auto',
		text: index + '?' + getCaption()
	});
	document.getElementById('qcImg').src = document.querySelector('canvas').toDataURL("image/webp");
    synthesisImgLoadBig();

    $('.tipsBtn').unbind("touchstart");
    $('.tipsBtn').unbind("touchend");
    $('.tipsBtn').bind("touchstart", function () {
        $(this).hide();
    });

    $('.tipsBtn').bind("touchend", function () {
        $(this).show();
    });
}
//判断图片是否加载完成
function synthesisImgLoadBig() {
	var img = $('.synthPage .synthPaper');
	if (img && img.length != 0) {
		if (img[0].complete) {
			var synBoxH = $('#synthWrap').height();
			var imgH = $('#synthWrap').height() - 100;
			$('#synthWrap>img.synthPaper').css('max-height', imgH + 'px');
			$('#qrcode').hide()
			synthesisImgBig();
		} else {
			setTimeout(function () { synthesisImgLoadBig() }, 300);
		}
	} else {
		setTimeout(function () { synthesisImgLoadBig() }, 300);
	}
}
//生成图片
function synthesisImgBig() {
	//clearInterval(synthesisImgLoadBig)
	var canvas = document.createElement('canvas'); // 创建一个canvas节点
	var shareContent = document.getElementById('synthWrap'); // 需要截图的包裹的（原生的）DOM 对象
	var width = shareContent.offsetWidth; // 获取dom 宽度
	var height = shareContent.offsetHeight; // 获取dom 高度
	var scale = 1.5; // 定义任意放大倍数 支持小数
	canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale
	var rect = shareContent.getBoundingClientRect(); // 获取元素相对于视口的
	html2canvas(document.getElementById('synthWrap'), {
		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
		$('#synthImg img').attr('src', canvas.toDataURL());
		$('#synthWrap').hide();
		$('#synthImg').show();
        $('.synthPage .synthmask').hide();
        $('.saveTipsBtn').show();
	})
}

//星期日期计算
function getWeekBig(timedat) { //timedat参数格式： "2018-09-11"
	let t = new Date(timedat);
	let week;
	if (t.getDay() === 0) week = "星期日";
	if (t.getDay() === 1) week = "星期一";
	if (t.getDay() === 2) week = "星期二";
	if (t.getDay() === 3) week = "星期三";
	if (t.getDay() === 4) week = "星期四";
	if (t.getDay() === 5) week = "星期五";
	if (t.getDay() === 6) week = "星期六";
	return week;
};

//判断当前时间和报纸刊期之间的时间差。 如在MaxshowData天内，返回true,否则返回false
// type=1,忽略dtStartStr，日期根据浏览器地址获取;type=2，根据前一个参数，格式(YYYY/MM/DD)
function DateMaxDiffBig(type, dtStartStr) {
	if (!ifMaxShowDate) { return true; }
	var maxinterval = MaxshowData;//允许看的天数
	var re = /(\d{4})-(\d{2})\/(\d{2})/i;
	var sUrl = location.href;
	var r = sUrl.match(re);
	var dtEnd = new Date();
	var dtStart;
	if (type == 1) {
		if (r) {
			dtStart = new Date(r[1] + "/" + r[2] + "/" + r[3]);
		} else {
			dtStart = new Date();
		}
	} else if (type == 2) {
		dtStart = new Date(dtStartStr);
		if (isNaN(dtStart)) dtStart = new Date();
	}

	var date3 = dtEnd.getTime() - dtStart.getTime();  //时间差的毫秒数
	var days = Math.floor(date3 / (24 * 3600 * 1000));//计算出相差天数
	if ((days) >= maxinterval) {
		return false;
	} else {
		return true;
	}
}