|
|
@@ -0,0 +1,401 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=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>
|
