http://chinaqking.com/certificate/certificate.js

1function Certificate(template, params) {
2  params = params || {};
3  var canvasId = params.canvasId;
4  var authors = params.authors; // 作者
5  var periodical = params.periodical; // 期刊
6  var year = params.year; // 年份
7  var month = params.month; // 月份
8  var period = params.period; // 期数
9  var article = params.article; // 文章
10  var website = params.website; // 网址
11  var fontSize = params.fontSize || 16;
12  var lineHeight = params.lineHeight || 20;
13  var fontStyle = `${fontSize}px serif`;
14
15  var textCenter = function(ctx, lines, maxWidth) {
16    var spaceWidth = ctx.measureText(" ").width;
17    return lines.map(function (line) {
18      var measuredWidth = ctx.measureText(line).width;
19      var spaceTotal = Math.floor((maxWidth - measuredWidth) / spaceWidth);
20      var i = 0;
21      for (; i < spaceTotal; i += 2) {
22        line = " " + line + " ";
23      }
24      if (i - 1 == spaceTotal) {
25        line = line + " ";
26      }
27      return line;
28    });
29  }
30
31  var calculateTextWrapLines = function (ctx, text, maxWidth) {
32    var lines = [];
33    var words = text.split("");
34    var line = "";
35    for (var i = 0; i < words.length; i++) {
36      var word = words[i];
37      var testLine = line + word;
38      var { width: measuredWidth } = ctx.measureText(testLine);
39      if (word === '\n') {
40        lines.push(line);
41        line = '';
42      } else if (measuredWidth > maxWidth) {
43        lines.push(line);
44        line = word;
45      } else {
46        line = testLine;
47      }
48    }
49    line.length && lines.push(line);
50
51    return textCenter(ctx, lines, maxWidth);
52  };
53
54  var calcStartY = function (endY, lineNum) {
55    return endY - (lineNum - 1) * lineHeight;
56  };
57
58  var drawLine = function (ctx, x, y, maxWidth) {
59    ctx.beginPath();
60    ctx.moveTo(x, y);
61    ctx.lineTo(x + maxWidth, y);
62    ctx.stroke();
63  };
64
65  var fillText = function (ctx, x, y, maxWidth, text) {
66    var lines = calculateTextWrapLines(ctx, text, maxWidth);
67    y = calcStartY(y, lines.length);
68    lines.forEach(function (line, index) {
69      ctx.fillText(line, x, y + index * lineHeight);
70    });
71  };
72
73  // 作者
74  var fillAuthors = function (ctx, authors) {
75    var x = 228;
76    var y = 275;
77    var maxWidth = 70;
78    fillText(ctx, x, y, maxWidth, authors);
79    // drawLine(ctx, x, y, maxWidth);
80  };
81
82  // 期刊
83  var fillPeriodical = function (ctx, periodical) {
84    var x = 414;
85    var y = 278;
86    var maxWidth = 300;
87    fillText(ctx, x, y, maxWidth, periodical);
88    // drawLine(ctx, x, y, maxWidth);
89  };
90
91  // å¹´
92  var fillYear = function (ctx, year) {
93    var x = 748;
94    var y = 1284;
95    var maxWidth = 210;
96    fillText(ctx, x, y, maxWidth, year);
97    // drawLine(ctx, x, y, maxWidth);
98  };
99
100  // 月
101  var fillMonth = function (ctx, month) {
102    var x = 1054;
103    var y = 1286;
104    var maxWidth = 92;
105    fillText(ctx, x, y, maxWidth, month);
106    // drawLine(ctx, x, y, maxWidth);
107  };
108
109  // 期数
110  var fillPeriod = function (ctx, period) {
111    var x = 1236;
112    var y = 1286;
113    var maxWidth = 92;
114    fillText(ctx, x, y, maxWidth, period);
115    // drawLine(ctx, x, y, maxWidth);
116  };
117
118  // 文章
119  var fillArticle = function (ctx, article) {
120    var x = 184;
121    var y = 310;
122    var maxWidth = 530;
123    fillText(ctx, x, y, maxWidth, article);
124    // drawLine(ctx, x, y, maxWidth);
125  };
126
127  // 网址
128  var fillWebsite = function (ctx, website) {
129    var x = 226;
130    var y = 368;
131    var maxWidth = 488;
132    fillText(ctx, x, y, maxWidth, website);
133    // drawLine(ctx, x, y, maxWidth);
134  };
135
136  var drawQrCode = function (ctx, website, complete) {
137    var x = 613;
138    var y = 396;
139    var img = new Image(80, 80);
140    img.onload = function () {
141      ctx.drawImage(img, x, y, img.width, img.height);
142      complete && complete()
143    };
144
145    window.QRCode.toDataURL(website, { margin: 1 }, function (err, url) {
146      if (!err) img.src = url;
147    });
148  };
149
150  var drawCanvas = function (complete) {
151    var canvasEl = canvasId ? document.getElementById(canvasId) : document.createElement('canvas');
152    var ctx = canvasEl.getContext("2d");
153    var img = new Image();
154    img.onload = function () {

155      canvasEl.width = img.naturalWidth;
156      canvasEl.height = img.naturalHeight;
157      if (ctx) {
158        ctx.drawImage(img, 0, 0, img.width, img.height);
159        ctx.font = fontStyle;
160
161        fillAuthors(ctx, authors);
162        fillPeriodical(ctx, periodical);
163        // fillYear(ctx, year);
164        // fillMonth(ctx, month);
165        // fillPeriod(ctx, period);
166        fillArticle(ctx, article);
167        fillWebsite(ctx, website);
168        drawQrCode(ctx, website, complete);
169      }
170    };
171    img.src = template;
172
173    return canvasEl;
174  };
175
176  var padStart = function (source, maxLength, fillString) {
177    source = String(source);
178    var len = maxLength - source.length;
179    for (var i = 0; i < len; i++) {
180      source = fillString + source;
181    }
182    return source;
183  };
184
185  var randomFilename = function (extName) {
186    var randomString = Math.random().toString(16).slice(2);
187    var date = new Date();
188    var year = date.getFullYear();
189    var month = padStart(date.getMonth() + 1, 2, "0");
190    var day = padStart(date.getDate(), 2, "0");
191    return year + month + day + "_" + randomString + extName;
192  };
193
194  var download = function () {
195    var canvasEl = drawCanvas(function () {
196      // 创建一个 a 标签，并设置 href 和 download 属性
197      var aEl = document.createElement("a");
198      // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
199      aEl.href = canvasEl.toDataURL();
200      aEl.download = randomFilename(".png"); // 文件名
201      // 创建一个点击事件并对 a 标签进行触发
202      var event = new MouseEvent("click");
203      aEl.dispatchEvent(event);
204    });
205  };
206
207  return { download: download, drawCanvas: drawCanvas };
208}