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.