Sometimes there is such a demand

There is a table that contains a batch of data that needs to be mass-produced into covers.
We can generate in batch in the browser.
such as

We have such a form that we need to generate book covers.

How to generate if there are more than 3,000 books

We can do this

$.ajax({
 url: 'ssss.csv',
 dataType: 'text'
 }).done(successFunction);

function successFunction(data) {
 var allRows = data.split(/\r?  \n|\r/);
 var table = '<table>';
 for (var singleRow = 0;   singleRow < 10;  singleRow++) {
 if (singleRow === 0) {
 table += '<thead>';
 table += '<tr>';
 } else {
 table += '<tr>';
 }
 var rowCells = allRows[singleRow].split(',');
 var m = {
 a: rowCells[0],
 b: rowCells[1],
 c: rowCells[2],
 d: rowCells[3]
 }
 book.push(m)
 for (var rowCell = 0;   rowCell < rowCells.length;  rowCell++) {
 if (singleRow === 0) {
 table += '<th>';
 table += rowCells[rowCell];
 table += '</th>';
 } else {
 table += '<td>';
 table += rowCells[rowCell];
 table += '</td>';
 }
 }
 if (singleRow === 0) {
 table += '</tr>';
 table += '</thead>';
 table += '<tbody>';
 } else {
 table += '</tr>';
 }
 }
 table += '</tbody>';
 table += '</table>';
 $('body').append(table);
 }

The first thing to do is to parse excel tables
Convert excel in csv format into table in html and push the required information to an array.

Html to get such a table

Then build canvas

function drawBook(arr) {
 console.log(arr)
 var c = document.getElementById("myCanvas");
 var img = 'c.png'
 var ctx = c.getContext("2d");
 // cxt.drawImage('c.png',0,0)
 
 var img = new Image();
 if (Math.random() < 0.5) {
 img.src = "c.png";
 } else {
 img.src = "b.png";
 }
 img.onload = function() {
 ctx.drawImage(img, 0, 0, 467, 666);
 ctx.fillStyle = "#985d3f";
 ctx.textAlign = "center";
 ctx.font = "36px Arial";
 ctx.fillText(arr.b.substring(0,8), 233, 100);
 ctx.fillText(arr.b.substring(8,16), 233, 150);
 ctx.fillText(arr.b.substring(16,24), 233, 200);
 ctx.font = "20px Arial";
 Ctx.fillText(arr.c+"/ author ",233, 240);
 ctx.font = "16px Arial";
 ctx.fillStyle = "#fff";
 ctx.fillText(arr.d, 233, 635);
 var i = c.toDataURL()
 download(i, arr.a, "png")
 // Canvas2Image.saveAsPNG(c)
 }
 }

function d() {
 b = book.length - 1
 for (var i = 0;   i < book.length;  i++) {
 setTimeout(() => {
 if (b !  == 0) {
 console.log(b)
 drawBook(book[b])
 b--
 }
 }, i * 2000)
 }
 }

After painting, download the picture with canvas2image.js

Then set the download path in chrome. Then the cover will be one by one

Is it convenient

The specific source code is on github.
https://github.com/fanshyiis/ …

Remember the stars if it is useful.