cqcarbon
/
cert-create


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!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(".txtStyle", "2bbc4dcf2e874e37875bd362aad4e32e", "Source-Han-Sans-Medium");
			$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;
				overflow: hidden;
				left: 50%;
				right: auto;
				transform: translateX(-50%);
			}
			.cred .QR-code {
				top:86%;
				right:45%;
				padding-top: 10%;
    			width: 10%;
				background: url(code.png) no-repeat center center;
				background-size: 100% 100%;
				border-radius: 0;
			}

			.cred .title {
				font-size: .45em;
				top: 19%;
				bottom: auto;
				text-align: center;
				line-height: 1.5em;
				/*color: #00984C;*/
			}
			.cred .title .coreTitle{
				font-size:0.8em;
				color:#329800;
			}
			.cred .title .subTitle{
				margin-top:-0.1em
				font-weight:bold;
				color:#35A129;
			}
			.cred .number {
				top: 29.8%;
				bottom: auto;
				font-size: .19em;
				text-align: center;
				line-height: 1em;
				color: #339A00;
			}

			.cred .content {
				top: 33%;
				bottom: auto;
				font-size: .32em;
				color: #323334;
				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;
			}

			.cred .stamp{
				width:2.4em;
				height:1.8em;
				top:58%;
				text-align:center;
			}
			.cred .stamp p{
				position:absolute;
				font-size:0.2em;
				z-index:1;
				color:#333;
			}
			.cred .stamp .stampImg{
				position:absolute;
				width:1.6em;
				height:1.6em;
				z-index:2;
				left: 50%;
				margin-left:-0.9em;
			}
			.cred .stampLeft{
				left:-39%;
			}
			.cred .stampLeft .stampImg{
				background:url("./hjt.png") no-repeat;
				background-size:cover;
			}
			.cred .stampLeft p.orgName{
				top:2.6em;
				left:1.5em;
			}
			.cred .stampLeft p.buyDate{
				top:4.1em;
				left:1.9em;
			}
			.cred .stampRight{
				right:-45%;
			}
			.cred .stampRight .stampImg{
				background:url("./gysy.png") no-repeat;
				background-size:cover;
			}
			.cred .stampRight p.orgName{
				top:2.6em;
				left:-0.4em;
			}
			.cred .stampRight p.buyDate{
				top:4.4em;
				left:1.9em;
			}

		</style>
	</head>

	<body>
		<div class="ui-relative cred" id="cred">
			<div class="ui-absolute QR-code"></div>
			<div class='ui-absolute title txtStyle'>
				<p class="coreTitle">“<span>碳汇+</span>”<span>生态产品价值实现</span></p>
				<p class="subTitle"><span>碳中和证书</span></p>
			</div>
			<div class="ui-absolute number txtStyle">
			</div>
			<div class="ui-absolute content txtStyle">

			</div>
			<div class="ui-absolute stamp stampLeft">
				<div class="stampImg"></div>
				<p class="orgName">重庆市生态环境局</p>
				<p class="buyDate time"></p>
			</div>
			<div class="ui-absolute stamp stampRight">
				<div class="stampImg"></div>
				<p class="orgName">重庆市阳光公益事业基金会</p>
				<p class="buyDate time"></p>
			</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) {
			// console.log(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;
			// console.log(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('year') + '年度碳汇量' + span('co2') + 'kg,\
				您购碳资金' + span('money') +'元,已全额转入'+ span('farmerName') +'的银行账户。</p>\
				<p>该笔碳汇可用于抵消您的碳排放</p>\
				<p>感谢您为生态文明建设和全球应对气候变化所做出的贡献。</p>';
			document.getElementsByClassName('time')[0].innerHTML = "<span>" + this.contentData.date + "</span>";
			document.getElementsByClassName('time')[1].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>