html转image--通过html2canvas在浏览器端处理_html-to-image sample-程序员宅基地

技术标签: Javascript  html2canvas  

将html显示截取成图片保存,可以在服务器端实现(这种方式的实现和缺点在另一篇博客中介绍了),同样也可以在浏览器端实现;在浏览器端实现无疑减少的服务器压力。

在浏览器实现需要借助第三方 html2canvas,它的使用方式请参考链接。

http://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/


核心流程

1,Download and import HTML2Canvas jquery files.
2,Add HTML markup.
3,jQuery Code: Button click convert HTML to Canvas.
4,jQuery Code: Download HTML to IMAGE.


整个实现流程:

screenshot->get image binary->image binary to blob object-> blob object to file object->upload

<style>
.size-table-page { overflow:hidden; max-width:1100px;margin:20px 100px; }
.size-table-page .screenshot-div { display:inline-block; }
.size-table-page table { background-color:#fff; }
.size-table-page table tr td { width:60px; max-width:10%; height:30px; line-height:30px; text-align:center; font-size:13px; padding:3px 6px; border:1px solid #000; }
.size-table-page table tr:first-child td { font-weight:bold; font-size:14px;}
.size-table-page table .td-bold { font-weight:bold; font-size:14px;}
</style>
<div class="size-table-page">
    <div class="screenshot-div">
        <table>
            <tbody>
                <tr>
                    <td class="td-bold">尺寸</td>
                    <td >肩宽</td>
                    <td >袖长</td>
                    <td >下摆</td>
                    <td >总长</td>
                </tr>
            

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jason_czm/article/details/54864002

智能推荐

无法理解高等数学怎么办?_高数-程序员宅基地

文章浏览阅读5.8k次,点赞26次,收藏39次。我们学高等数学的时1候是这样的:这当然学不懂了,跨度太大了。这个锅,教材(对,说的就是同济《高等数学》)肯定得背。1 应该怎么学习?学习应该循序渐进,意思就是,应该从已有的知识出发,保持足够小的步伐前进。让我们把已有的知识称作 ,足够小的步伐称为 ,那么:才是最有效的学习方法。比如:注意:什么是 是比较主观的问题。下面我尝试用 的方法,解释下..._高数

openGauss学习笔记-42 openGauss 高级数据管理-触发器_opengauss数据库创建触发器语法-程序员宅基地

文章浏览阅读457次。触发器会在指定的数据库事件发生时自动执行函数。_opengauss数据库创建触发器语法

ELasticsearch的安装以及与spring-data-elasticsearch的整合使用_lorg/elasticsearch/common/settings/settings;ljava/-程序员宅基地

文章浏览阅读3.1k次。#Elasticsearch安装这里本人使用的是docker镜像安装,至于怎么安装就不说了,贴一下配置最基本的配置文件就好#集群名称,默认为elasticsearch, 命名规则为 es-产品名-ES版本cluster.name: luckyqing#节点名称,es启动时会自动创建节点名称,但你也可进行配置node.name: es-46-68-76#设置索引的分片数#index..._lorg/elasticsearch/common/settings/settings;ljava/lang/string;)v

Linux运维面试题(四)之Linux服务管理_linux运维网络服务4-程序员宅基地

文章浏览阅读337次。Linux运维面试题(四)之Linux服务管理_linux运维网络服务4

Spring注解依赖注入详解_依赖注入和注解的区别-程序员宅基地

文章浏览阅读1.1k次。依赖注入可以使用 `@Autowired`, `@Resource`, `@Inject` 三个注解,那么这3中注解有何异同呢?_依赖注入和注解的区别

大数据lab5/spark_大数据实验spark-程序员宅基地

文章浏览阅读1k次。sparkidea加入Scala插件的方法:在pom.xml加入 <build> <plugins> <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>scala-maven-plugin</artifactId> _大数据实验spark

随便推点

idea 如何配置软回车_idea 软换行什么意思-程序员宅基地

文章浏览阅读598次。软回车: 只是视觉上的换行, 其实文本内容并没实际换行, 这是为了我们可以直接看到整行内容, 而无需再使用鼠标水平滚动窗口idea 中可以配置编辑器软换行editor > general > 勾选 soft wrap these files: * (其中 * 表示软换行对所有文件生效)配置控制台软换行editor > console > 勾选 use soft wraps in console编辑器和控制台软换行效果如图..._idea 软换行什么意思

Vue 2项目如何升级到Vue 3?_vue2项目换成vue3-程序员宅基地

文章浏览阅读2.4w次,点赞14次,收藏67次。Vue2项目如何升级到Vue3_vue2项目换成vue3

Activiti工作流使用详细介绍_activiti开启工作流-程序员宅基地

文章浏览阅读554次。Activiti项⽬是⼀项新的基于Apache许可的开源BPM平台,BPM,即Business Process Management,业务流程管理,通常,BPM也指针对流程管理的信息化系统,其特点是注重流程驱动为核⼼,实现端到端全流程信息化管理。BPMN,即Business Process Modeling Notation,业务流程建模符号。BPMN定义了⼀个业务流程图。_activiti开启工作流

十大排序算法总结(c++版本)-程序员宅基地

文章浏览阅读78次。排序算法的分类:1插入:插入,折半插入,希尔2交换:冒泡,快速3选择:简单选择,堆4归并:归并(不只二路归并)5基数:1插入排序void insert_sort(){ for (int i = 1; i < n; i ++ ) { int x = a[i]; int j = i-1; while (j >= 0 && x < a[j])...

新颖的基于BS结构的毕业设计题目50例_bs实训题目-程序员宅基地

文章浏览阅读711次。新颖的基于BS结构的毕业设计题目50例,该基于BS结构的毕业设计题目包含了:UML对基于BS结构的PDM系统的分析与建模,基于BS结构的高校毕业设计选题系统的设计与实现,基于BS结构的第三方物流管理系统设计与实现,基于BS结构的毕业设计(论文)系统的设计与实现等。..._bs实训题目

GVRP基础配置_gvrp unrecognized command-程序员宅基地

文章浏览阅读1k次。原理概述:GVRP VLAN 注册协议是一种通用属性注册协议的应用,使得交换机之间能够相互交换VLAN配置信息,动态创建和管理VLAGVRP三种注册模式:Normal模式:允许动态VLAN在端口上进行注册,同时会发送静态VLAN和动态VLAN的声明消息。Fixed模式:不允许动态VLAN在端口上注册,只发送静态VLAN的声明消息。Forbidden模式:不允许动态VLAN在端口上进行注册,同时删除端口上除VLAN1外的所有VLAN,只发送VLAN1的声明消息。实验目的:1、理解GVRP的应用场_gvrp unrecognized command

推荐文章

热门文章

相关标签