cqcarbon
/
cqcarbonwxapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 强制让文档与设备的宽度保持1：1 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
		<script type="text/javascript">
			$youziku.load(".title span", "94d4ba0acbef4c97b7abfecaa9a3e1a8", "cyjianxk");
			$youziku.draw();
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.ui-absolute {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

			.ui-relative {
				position: relative;
			}

			.cred {
				background: url(bg.png) no-repeat center center;
				background-size: 100% 100%;
				width: calc(908px/1.5);
				height: calc(1304px/1.5);
				font-size: calc(908px/1.5*0.11);
				margin: 0 auto;
			}

			.cred .logo,
			.cred .QR-code {
				bottom: auto;
				padding-top: 20%;
				width: 20%;
				border-radius: 50%;
				overflow: hidden;
				left: 50%;
				right: auto;
				transform: translateX(-50%);
			}

			.cred .logo {
				top: 6%;
				background: url(logo.png) no-repeat center center;
				background-size: 100% 100%;
			}

			.cred .QR-code {
				top: 68%;
				background: url(code.png) no-repeat center center;
				background-size: 100% 100%;
				border-radius: 0;
			}

			.cred .title {
				font-size: .40em;
				top: 19%;
				bottom: auto;
				text-align: center;
				line-height: 1.5em;
				color: #00984C;
			}

			.cred .number {
				top: 29%;
				bottom: auto;
				font-size: .28em;
				text-align: center;
				line-height: 1em;
				color: #000;
			}

			.cred .content {
				top: 33%;
				bottom: auto;
				font-size: .32em;
				color: #333333;
				margin: auto 12% auto 13%;
				font-weight: 300;
			}

			.cred .content p {
				text-indent: 2em;
				line-height: 2em;
				letter-spacing: .05em;
				word-wrap: break-word;
				word-break: break-all;
			}

			.cred .content .name {
				text-indent: 0;
			}

			.cred .content p span {
				border-bottom: 2px solid #010101;
				overflow: hidden;
			}

			.cred .seal-1,
			.cred .seal-2 {
				top: 72%;
				bottom: auto;
				width: 26.22%;
				padding-top: 26.22%;
				border-radius: 50%;
			}

			.cred .seal-1 {
				background: url(z1.png) no-repeat center center;
				background-size: 100% 100%;
				left: 20%;
				right: auto;
			}

			.cred .seal-2 {
				background: url(z2.png) no-repeat center center;
				background-size: 100% 100%;
				right: 20%;
				left: auto;
			}

			.cred .seal-1-text {
				top: 84%;
				padding-top: 0;
				background: none;
				font-size: .25em;
				bottom: auto;
				line-height: 1em;
				color: #000;
				display: flex;
				text-align: center;
				width: 60%;
				left: 10%;
				right: 10%;
			}

			.cred .seal-1-text span {
				flex: 1;
			}

			.cred .seal-1-text.time {
				top: 90%;
				right: 0;
				left: 0;
				margin: auto;
				text-align: center;
			}

			.cred .foot-text {
				top: auto;
				bottom: 6.82%;
				font-size: .23em;
				line-height: 1.5em;
				left: 13.43%;
				right: 13.43%;
				color: #595656;
				text-indent: 2em;
				letter-spacing: .1em;
			}
		</style>
	</head>

	<body>
		<div class="ui-relative cred" id="cred">
			<div class="ui-absolute logo"></div>
			<div class="ui-absolute QR-code"></div>
			<div class='ui-absolute title'>
				<p><span>重庆</span>"<span>碳汇</span>+"<span>生态产品价值实现</span></p>
				<p><span>碳信用证书</span></p>
			</div>
			<div class="ui-absolute number">
				<!-- 证书编号：G18G0000001 -->
			</div>
			<div class="ui-absolute content">
				<!-- <p class="name">
				尊敬的
				<span>雷</span><span>电</span>:</p>
			<p>感谢您对贵州省单株碳汇精准扶贫的支持。您购买了
				<span>2018</span>年度单株碳汇
				<span>100</span>株,碳汇签发量
				<span>1000</span>千克二氧化碳当量,帮助了来自
				<span>贵</span>
				<span>州</span>
				<span>省</span>
				<span>安</span>
				<span>顺</span>
				<span>市</span>
				<span>平</span>
				<span>坝</span>
				<span>区</span>深度贫困村
				<span>关口村</span>的
				<span>刘兴莲</span>等
				<span>15</span>户贫困户。您购碳资金
				<span>30000</span>元,已全额转入
				<span>刘兴莲</span>等
				<span>15</span>户贫困户的个人银行账户。</p>
			<p>※该笔碳汇可用于抵消您个人碳排放,为应对全球气候变化做出贡献。</p> -->
			</div>
			<div class="ui-absolute seal-1-text">
				<span>重庆市生态环境局</span>
				<span>中国质量认证中心</span>
			</div>
			<div class="ui-absolute seal-1-text time">
				<!-- <span>2018年8月10日</span> -->
			</div>
			<!-- <div class="ui-absolute seal-1"></div> -->
			<!-- <div class="ui-absolute seal-2"></div> -->
			<!-- <div class="ui-absolute foot-text">※实名认购记录可作为个人(企业)优良信息,归集到全国信用信息共享平台(贵州)个人(企业)名下。</div> -->
		</div>
	</body>
	<script src="html2canvas.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//下载图片
		let downloadImg = function(obj) {
			obj = obj || {};
			this.imgData = obj.data.toDataURL((obj.format || 'image/jpg')) || null;
			this.src = '';
			this.init();
		};
		downloadImg.prototype.init = function() {
			this.downloadImgFile(this.imgData);
		};
		//下载
		downloadImg.prototype.downloadImgFile = function(content) {
			var _this = this;
			var blob = this.base64ToBlob(content);
			this.src = URL.createObjectURL(blob);
		};
		downloadImg.prototype.base64ToBlob = function(code) {
			let parts = code.split(';base64,');
			let contentType = parts[0].split(':')[1];
			let raw = window.atob(parts[1]);
			let rawLength = raw.length;
			let uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			return new Blob([uInt8Array], {
				type: contentType
			});
		};

		window.certificate = function(obj) {
			var _this = this;
			_this.obj = obj || {
				elem: 'cred'
			};
			_this.contentData = obj.data || {};
			_this.content();
			_this.elem = _this.obj.elem || 'cred'; //要绘制的页面
			_this.elemObj = document.getElementById(_this.elem);
			_this.format = _this.obj.format || "jpg"; //下载格式
			_this.success = obj.success || function(url, data) {
				console.log("没有配置success接收函数");
			};
			_this.type = null;
			_this.A0 = {
				width: '1080px',
				height: '1551px',
				'font-size': '118.8px'
			};
			_this.A3 = {
				width: '3058px',
				'height': '4961px',
				'font-size': '336.38px'
			};
			_this.A4 = {
				'width': '2048px',
				'height': '3508px',
				'font-size': '225.28px'
			};
			// _this.down('A0');
		};
		certificate.prototype.content = function(obj) {
			var _this = this;
			this.contentData = obj || this.contentData;
			let span = function(name, bool) {
				let html = '';
				let arr = (typeof(_this.contentData[name]) == 'undefined' ? [] : _this.contentData[name]) + '';
				for (let i in arr) {
					html += bool ? '<span>' + arr[i] + '</span>' : arr[i];
				}
				return html;
			};
			document.getElementsByClassName('number')[0].innerHTML = this.contentData.code == '0' ? '' : '普惠证书编号:' + this.contentData
				.code;
			document.getElementsByClassName('content')[0].innerHTML = '<p class="name">尊敬的' + span('name', true) +
				':</p>\
				<p>欢迎参与重庆“碳汇+”生态产品价值实现试点示范，您此单购买“碳汇+”生态产品' + span('co2') + 'kgCO2减排量,\
				资金支出' + span('money') +
				'元,生成碳信用额' + span('credit') + '个,可等量累计“碳汇+”积分' + span('integral') + '分。</p>\
				<p>感谢您为生态文明建设做出的贡献!</p>';
			document.getElementsByClassName('time')[0].innerHTML = "<span>" + this.contentData.date + "</span>";
		};
		certificate.prototype.generate = function() {
			var _this = this;
			_this.style(_this.elemObj, _this[_this.type]);
			return _this;
		};
		certificate.prototype.style = function(elem, styleObj) {
			for (let i in styleObj) {
				elem.style[i] = styleObj[i];
			}
			return elem;
		};
		certificate.prototype.down = function(type) {
			if (this.type == type) {
				this.aLink.dispatchEvent(this.evt);
				return -1;
			} else {
				this.type = type;
				return this.generate().html2canvas();
			}
		};
		certificate.prototype.html2canvas = function() {
			var _this = this;
			html2canvas(_this.elemObj).then(function(canvas) {
				let img = new downloadImg({
					data: canvas,
					format: 'image/' + (_this.format || 'jpg'),
				});
				if (img.src) {
					_this.src = img.src;
					if (_this.success) {
						_this.data = canvas.toDataURL('image/' + (_this.format || 'jpg'));
						_this.aLink = document.createElement('a');
						_this.evt = document.createEvent("MouseEvents");
						_this.evt.initEvent("click", true, true);
						_this.aLink.download = new Date().getTime() + '.' + (_this.format || 'jpg');
						_this.aLink.href = _this.src;
						_this.success(function(type) {
							switch (type) {
								case 'down':
									_this.aLink.dispatchEvent(_this.evt);
									return _this.src;
									break;
								case 'url':
									return _this.src;
									break;
								case 'data':
									return _this.data;
									break;
								default:
									return _this.src;
							}
						}, _this.data);
					}
				}
			});
			return _this;
		};
	</script>

</html>