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

智能推荐

Java集合之ArrayList详解_arrialist java element-程序员宅基地

文章浏览阅读1.8k次。简介ArrayList是一个数组队列,相当于动态数组。与Java中的数组相比,它的容量能动态增长。它继承于AbstractList,实现了List、RandomAccess、Cloneable、 Serializable等接口。ArrayList不是线程安全的,只能用在单线程环境下,多线程环境下可以考虑用Collections.synchronizedList(List l)函数返回一个线程安全的..._arrialist java element

解决Easywechat授权登录出现重定向页面(Redirecting to https://open.wein.qq.com/...) 直接出现代码 用户体验不好_easywechat 公众号登录 出现重定向页面-程序员宅基地

文章浏览阅读1.5k次。问题:授权登录时 会弹出重定向的细节 用户体验不好 如下图解决办法:代码追踪 最后发现请求地址文件在vendor/symfony/http-foundation/RedirectResponse.php 如下图及方法以上的html部分就是我们重定向时看到的 为保证框架后续功能稳定 我们只需要将body 隐藏显示 title删除 清除浏览器缓存 再次访问发现就没有了..._easywechat 公众号登录 出现重定向页面

IDL_prc idl-程序员宅基地

文章浏览阅读1.5k次。http://baike.baidu.com/view/160644.htm交互式数据语言   全称:Interactive Data Language   IDL是一种数据分析和图像化应用程序及编程语言,先由美国ITT公司所有_prc idl

centos7部署django+nginx+uwsgi_基于centos7.9使用docker部署django+nginx+uwsgi,django项目有数-程序员宅基地

文章浏览阅读347次,点赞2次,收藏3次。1.当我们项目写好之后,如何去部署到正式服上去那,部署的时候,我们需要三个东西,项目代码,nginx, uwsgi这三个东西,至于nginx如何安装,我在上一篇博客上已经写了,至于nginx如何代理,nginx还需要配置一下,我们先看一下一个请求过来的流程图:2. 我们先配置nginx,我上一篇博客中nginx已经安装好了,接下来配置就可以了2.1 执行命令:cd /usr/local/nginx/conf2.2 然后打开:vim nginx.conf (nginx.conf就是nginx的配置_基于centos7.9使用docker部署django+nginx+uwsgi,django项目有数据库

Python之文件处理_def __init__(self, file1=none,file2=none,file3=non-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏17次。任何语言都离不开对文件的操作,Python语言是如何来操作和管理文件的。今天就让我们一起去打开Python文件的世界,Python如何操作和管理文件?_def __init__(self, file1=none,file2=none,file3=none): self.file1 = file1 sel

Linux Curl命令教程_linux ctul-程序员宅基地

文章浏览阅读146次。目录1.curl命令简介2.curl命令语法和参数3.curl基本用法介绍4.curl的常见用法(项目应用)1.curl命令简介curl命令是利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具。它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具。2.curl命令语法和参数# curl [option] [url]常见参数-A/--user-agent <string> 设..._linux ctul

随便推点

TensorFlow实现简单的卷积神经网络_#### 1. 请用tensorflow编写实现一个卷积神经网络,并进行模型效果的可视化展示。-程序员宅基地

文章浏览阅读1.4k次。一、卷积神经网络简介卷积神经网络(Convolutional Neural Network, CNN)最初是为了解决图像识别等问题设计的,当然其现在的应用不仅限于图像和视频,也可以用于时间序列信号,比如音频信号,文本数据等。早期的图像识别研究中,最大的挑战是如何组织特征,因为图像数据不像其他类型的数据那样可以通过人工理解来提取特征。我们需要借助SIFT、HoG等算法提取具有良好区分行的特征。在..._#### 1. 请用tensorflow编写实现一个卷积神经网络,并进行模型效果的可视化展示。

L1-026 I Love GPLT (5 分)_道超级简单的题目没有任何输入。 你只需要把这句很重要的话 —— i love gplt ——竖着输出-程序员宅基地

文章浏览阅读430次。这道超级简单的题目没有任何输入。你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了。所谓“竖着输出”,是指每个字符占一行(包括空格),即每行只能有1个字符和回车。输入样例:无输出样例:ILoveGPLT注意:输出的两个空行中各有一个空格。#include&lt;stdio.h&gt;int main(){..._道超级简单的题目没有任何输入。 你只需要把这句很重要的话 —— i love gplt ——竖着输出就可以了。 所谓“竖着输出”,是指每个字符占一行(包括空格),即每行只能有1个字符和回车。

如何在VC 6.0 上输出特殊符号比如一个黑色的实心方块_c语言▇黑方块符号-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏6次。首先在windows的附件里面,找到字符映射表,查找黑色的实心方块字符,选择-复制-粘贴到vc6.0的代码编辑区中即可。粘贴到编辑区:_c语言▇黑方块符号

vxe-table框架设置表头居中,某列内容左右对齐方法_vxe-table 居中-程序员宅基地

文章浏览阅读5.4k次。问题描述:使用vxe-table框架设置表头居中,某列内容左右对齐方法解决办法:1.table上加上以下内容2.方法中加入cellStyle()方法_vxe-table 居中

mysql 绕过addslashes_代码审计Day13 - 特定场合下addslashes函数的绕过-程序员宅基地

文章浏览阅读623次。原标题:代码审计Day13 - 特定场合下addslashes函数的绕过前言大家好,我们是红日安全-代码审计小组。最近我们小组正在做一个PHP代码审计的项目,供大家学习交流,我们给这个项目起了一个名字叫PHP-Audit-Labs。现在大家所看到的系列文章,属于项目第一阶段的内容,本阶段的内容题目均来自PHP SECURITY CALENDAR 2017。对于每一道题目,我们均给出对应的分析,并结...

C++ 绑定Lambda表达式到回调函数_怎么把lambdar表达式转为回调函数-程序员宅基地

文章浏览阅读6.2k次,点赞3次,收藏10次。Lambda表达式是定义匿名函数对象的简便方式,通常作为参数传递给算法或异步方法。本文讨论如何传递Lambda到含有函数指针类型参数的函数。关键词:Lambda,回调函数,包装器,函数模板,decltype,auto。_怎么把lambdar表达式转为回调函数

推荐文章

热门文章

相关标签