有时候会有这样的需求吧

有一个表格里面有一批数据需要批量生成封面

我们有这样一个表格需要生成图书封面

有三千多本书的话该怎么生成

我们就可以这样做

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

function successFunction(data) {        var allRows = data.split(/\r?\n|\r/);        var table = '
    
     ';        for (var singleRow = 0; singleRow < 10; singleRow++) {            if (singleRow === 0) {                table += '
      ';                table += '
       ';            } else {                table += '
       ';            }            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 += '
';                } else {                    table += '
';                }            }            if (singleRow === 0) {                table += '
';                table += '
';                table += '
      ';            } else {                table += '';            }        }        table += '
';        table += '
     
      
      
      
       
';                    table += rowCells[rowCell];                    table += '
       
';                    table += rowCells[rowCell];                    table += '
      
     
     
     
    
';        $('body').append(table);    }

首先要解析excel表格

html里得到这样的表格

然后构建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 + "/著", 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)        }    }

画好后用canvas2image.js下载图片

然后在chrome里设置下下载路径。然后封面就一个一个下啦

是不是很方便

具体源代码在github上

有用的话记得星星