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

智能推荐

linux MacOS 工作踩坑_mount_macfuse: mount point /users/cc/fastadmin is -程序员宅基地

文章浏览阅读1k次。Mac 复制ssh(path : ~/.ssh/id_rsa.pub) 不要进vim复制 使用 pbcopy &lt; ~/.ssh/id_rsa.puberror message : mount_osxfusefs: mount point /Users/jan/site-sshfs is itself on a OSXFUSE volume umount 该远程目录..._mount_macfuse: mount point /users/cc/fastadmin is itself on a macfuse volume

Ubuntu 20.04 安装CUDA Toolkit和cuDNN_ubuntu20.04 cuda toolkit (e.g. version 9.2)-程序员宅基地

文章浏览阅读2.4k次。Ubuntu 20.04 安装 cuda-toolkit-11.0 和 cudnn-8.0.51、首先下载安装cuda驱动按win + A键,打开所有程序,然后找到Software & Update,点击之后选择Additional Drivers,选择其中一个,然后点击Apply changes,如下图所示:然后重启系统,在终端中输入nvidia-smi,查看驱动是否安装成功,出来这种表格就算成功了。2、下载并安装 CUDA Toolkit这里下载的是CUDA Toolkit 11._ubuntu20.04 cuda toolkit (e.g. version 9.2)

2020年转行做程序员_2020年制作教育应用程式需要多少费用-程序员宅基地

文章浏览阅读899次。2020年转行做程序员Undoubtedly, 2020 has bought a drastic change in almost every industry, and education is not left untouched with the impact of modern technologies. In fact, it is right to say that the evol..._quick highlights

Hadoop常见错误解析_hdfs could not get block locations-程序员宅基地

文章浏览阅读3k次。1:Shuffle Error: Exceeded MAX_FAILED_UNIQUE_FETCHES; bailing-out Answer:程序里面需要打开多个文件,进行分析,系统一般默认数量是1024,(用ulimit -a可以看到)对于正常使用是够了,但是对于程序来讲,就太少了。修改办法:修改2个文件。 /etc/security/limits._hdfs could not get block locations

如何下载Chrome离线安装包 MSI系统级安装包_chrome离线版msi-程序员宅基地

文章浏览阅读1w次。http://blog.163.com/yangji008@126/blog/static/70036935201010200270623/_chrome离线版msi

在Outlook 2013中发送给多个收件人时如何隐藏电子邮件地址-程序员宅基地

文章浏览阅读5.5k次。When you send email to multiple recipients (some of whom may be unknown to each other), it’s betternot to display everyone’s email address. Here’s how to get that donein Outlook. 将电子邮件发送给多个收件人(其中一些..._如何隐藏多个收件人的电邮地址信息

随便推点

特征筛选_psi筛选特征-程序员宅基地

文章浏览阅读6.2k次。1. 特征筛选单特征分析覆盖度区分度稳定性多特征筛选星座BorutaVIFRFEL1业务内部特征的监控前端稳定性后端区分度外部特征的评估评分型数据名单型数据保护隐私未来信息1.1 单特征分析1. 简介好特征可以从几个角度衡量:覆盖度,区分度,相关性,稳定性2. 分析角度2.1 覆盖度采集类,授权类,第三方数据在使用前都会分析覆盖度采集类 :如APP list (Android 手机 90%)授权类:如爬虫数据(20% 30_psi筛选特征

5种主流周界安防检测技术,EasyCVR智能检测视频平台可以实现哪些应用?_视频周界的原理是什么-程序员宅基地

文章浏览阅读1.7k次。融合AI智能分析技术,比如人脸识别、人脸检测、烟火识别、行为分析技术等等,对视频监控场景中的人、物、行为等进行抓拍、检测与识别,对异常情况进行智能提醒和通知,在周界安防中也发挥重要作用。_视频周界的原理是什么

LSTM GRU区别_相比于gru,lstm参数较少,较容易收敛-程序员宅基地

文章浏览阅读623次。结论:GRU和LSTM的性能在很多任务上不分伯仲。 GRU 参数更少因此更容易收敛,但是数据集很大的情况下,LSTM表达性能更好。 从结构上来说,GRU只有两个门(update和reset),LSTM有三个门(forget,input,output),GRU直接将hidden state 传给下一个单元,而LSTM则用memory cell 把hidden state 包装起来。 G..._相比于gru,lstm参数较少,较容易收敛

vue强制更新数据$forceUpdate()和this.$set()-程序员宅基地

文章浏览阅读1.8w次,点赞13次,收藏57次。方法一、添加this.$forceUpdate();进行强制渲染,效果实现可以实现。从搜索资料得出结果:因为数据层次(for循环太多)太多,render函数没有自动更新,需手动强制刷新。调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )使用方法:input( ) { // vue2的引_$forceupdate()

vue + elemetui — upload解决跨域、实现图片上传_vue 图片跨域-程序员宅基地

文章浏览阅读7.9k次,点赞3次,收藏16次。 最近做Vue项目,需要用到图片上传的功能,因为是PC端后台项目,故而采用了element-ui组件库里的upload上传的组件。本文主要解决上传时的跨域问题。 action属性便是上传的地址,需要进行跨域。话..._vue 图片跨域

kubernetes 【组件】ingress controller 如何通过域名访问您的应用_ingress 域名-程序员宅基地

文章浏览阅读5.7k次,点赞2次,收藏8次。文章目录1. 简介2. 安装3. 测试1. 简介Ingress 是 Kubernetes 的一种 API 对象,将集群内部的 Service 通过 HTTP/HTTPS 方式暴露到集群外部,并通过规则定义 HTTP/HTTPS 的路由。Ingress 具备如下特性:集群外部可访问的 URL、负载均衡、SSL Termination、按域名路由(name-based virtual hosting)。增加了7层的识别能力,可以根据 http header, path 等进行路由转发。2. 安装安装指_ingress 域名

推荐文章

热门文章

相关标签