Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Excel快速批量导入生产Cavns并生成图片下载到本地

Excel快速批量导入生产Cavns并生成图片下载到本地

作者头像
super.x
发布于 2019-04-12 07:52:25
发布于 2019-04-12 07:52:25
60700
代码可运行
举报
运行总次数:0
代码可运行

有时候会有这样的需求吧

有一个表格里面有一批数据需要批量生成封面 我们在浏览器里可以批量生成 比如

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

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

我们就可以这样做

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.ajax({
        url: 'ssss.csv',
        dataType: 'text'
    }).done(successFunction);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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);
    }

首先要解析excel表格 把csv格式的excel转化成html里面的table顺便把需要的信息push到一个数组

html里得到这样的表格

然后构建canvas

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
        }
    }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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上 https://github.com/fanshyiis/...

有用的话记得星星

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序给图片添加水印(时间,经纬度信息)
在移动互联网时代,小程序因其轻量、便捷的特性,逐渐成为用户日常生活中不可或缺的工具。无论是社交、购物,还是记录生活,小程序都提供了丰富的功能。然而,随着用户对数据安全和信息追溯需求的增加,如何在图片中添加关键信息(如时间、经纬度等)成为开发者需要解决的问题之一。尤其是在一些特定场景下,如户外打卡、旅行记录、证据留存等,为图片添加时间戳和地理位置信息不仅能增强数据的可信度,还能为用户提供更丰富的上下文信息。
fastmock
2025/07/22
940
字符画生成01
今天mixlab群里有人问: 网站 https://www.fontke.com/tool/image2ascii/ 上传图片生成字符画,如何把文本转化为图片保存下来。 解决方案是: 1 获取每行的字
mixlab
2018/07/25
8480
字符画生成01
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
零零总总花了半天的时间,希望对自己后面涉及H5游戏有所帮助,也希望大家通过这篇文章有所收获。
徐小夕
2019/08/09
1.8K0
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
canvas详细教程! ( 近1万字吐血总结)
今天为大家带来的是我已经写了很久了的canvas详细教程,按照文章的案例一个一个敲下来保证你可以学会绘制很多图案和动画,对入门canvas很有帮助!
用户9999906
2022/12/22
4.3K0
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vue-cli。
徐小夕
2020/09/02
1.1K0
Canvas
http://www.w3c.org/TR/2dcontext/ https://html.spec.whatwg.org/
jinghong
2020/05/09
13.2K0
Canvas
三维可视化开发这事儿前端人员能搞定吗?
    url: 'https://www.thingjs.com/static/models/storehouse'    // 三维可视化场景地址
要不要吃火锅
2019/12/11
5810
三维可视化开发这事儿前端人员能搞定吗?
canvas入门实战--邀请卡生成与下载
写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样,可以不用太厉害,但是必须要会基础的用法。但是以后对canvas的需求,肯定会越来越大。所以canvas很值得学习,而且学好canvas,就是很好的一个加分项。对于这篇文章,我也是以canvas初学者的角度写的,会有很多改善的地方。如果大家觉得我有什么可以改善的,或者建议,欢迎指点迷津!代码已上传github,需要的欢迎star(downloadImg)。
守候i
2018/08/22
6250
canvas入门实战--邀请卡生成与下载
利用Phaser开发微信小游戏(排行榜小结)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
bering
2019/12/03
2.4K0
前端水印生成方案
安全问题不能大意,对于一些比较敏感的内容,我们可以通过组合使用上述的水印方案,这样才能最大程度给浏览者警示的作用,减少泄密的情况,即使泄密了,也有可能追踪到泄密者。
QQ音乐前端团队
2018/07/15
7.3K2
一个简单的PHP图片装逼生成原理
一个非常简单的表情生成,省去了配置其他PHP 一个简单的html能能做到 原理非常简单就是利用JS实现 QQ截图20170824093955.png <script type="text/javascript"> function draw(){ var canvas = document.getElementById("myCanvas"); //获取Canvas对象(画布) var write = document.getElementById("text").value /
用户8099761
2023/05/10
4400
jscanvas合成图片实现微信公众号海报功能
在微信公众号开发中,很多时候都有个需求是一张图加上头像和昵称或者其他数据生成自己的二维码海报或者是生成分享海报
仙士可
2019/12/19
1.4K0
第155天:canvas(二)
​ 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。
半指温柔乐
2018/09/11
5270
第155天:canvas(二)
H5和微信小游戏 Canvas API 整理前言
这段时间闲下来,系统学习了微信小程序和微信小游戏,发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎,用原生小游戏开发工具开发的很少很少。但是毕竟我不是专业游戏开发,所有游戏引擎就不搞了,我们就单纯来看原生微信小游戏开发。
大公爵
2018/10/10
3.1K0
H5和微信小游戏 Canvas API 整理前言
canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏–canvas。利用 canvas,前端人员可以很轻松地、进行图像处理。其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码:
心谭博客
2020/04/20
7350
用代码生成Glitch Art风格的抖音字体
最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体,我也非常喜欢这种风格的字体,于是趁着晚上的时间,动手用代码实现了下此类风格的字体特效,顺便开发了个小工具,地址见文末。本文主要是从艺术手法和 JS 前端实现 2 个方面进行梳理,我们可以看到如何用代码来描述艺术手法,达到自动化生成某一风格作品的目的。 我们先了解下抖音的这种 logo 的艺术风格。抖音 logo 这种设计手法,是故障艺术 Glitch Art 中的“错位”。故障艺术还有燥波、失真、毛刺等等其他设计手法。 Gl
mixlab
2018/04/16
2.7K0
用代码生成Glitch Art风格的抖音字体
Canvas 奇妙历险(一)
canvas的中文名叫画布,是HTML5元素的一部分。最早是由苹果公司提出的这么一个概念,后来被应用在我们的网络技术上,结合Javascript脚本编程,我们可以创建动态渲染位图像,位图就是矢量图,即不管你放大缩小,它依旧是能够保持高逼真的姿态。
江涛学编程
2020/06/19
9310
Canvas 奇妙历险(一)
Canvas 从进阶到退学
接着 《Canvas 从入门到劝朋友放弃(图解版)》 ,本文继续补充 canvas 基础知识点。
德育处主任
2022/12/13
2.2K0
Canvas 从进阶到退学
js之H5画布不显示图片的问题解决
在onReady 执行 <template> <view class=""> <canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas> <!-- <view class="container"> <img :src="tempFilePath" /> </view> --> </view> </template> <script> var
IT工作者
2022/05/16
1.3K0
JS实现炫酷的黑客帝国效果
今天正好在阿里云导出数据库的时候看到了这个效果,就把代码扒下来了~ code.png 以下为完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ width: 100vw; height: 100vh; }
Ashen
2020/04/29
3.4K0
相关推荐
小程序给图片添加水印(时间,经纬度信息)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验