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>