Excel imports Cavns in batch and generates pictures to download locally.

  canvas, excel, javascript

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

clipboard.png

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

clipboard.png

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.

clipboard.png

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

clipboard.png

clipboard.png

clipboard.png

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

Remember the stars if it is useful.