抓取html 生成图片
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://www.tianjihr.com/VipTemplates/1563089/1/js/jquery-1.8.2.min.js"></script> | |
| <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> | |
| <style> | |
| * { | |
| margin: 0; | |
| } | |
| .test { | |
| width: 100px; | |
| height: 100px; | |
| text-align: center; | |
| line-height: 100px; | |
| background-color: #87CEEB; | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| canvas { | |
| margin-right: 5px; | |
| } | |
| .down { | |
| float: left; | |
| margin: 40px 10px; | |
| } | |
| .down2 { | |
| float: left; | |
| margin: 40px 30px; | |
| } | |
| .test.active{ display:none;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="test" id="www">测试<span>11212145</span></div> | |
| <img class="sc" src="" /> | |
| <script> | |
| //直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊 | |
| //html2canvas(document.querySelector('div')).then(function(canvas) { | |
| // document.body.appendChild(canvas); | |
| //}); | |
| //创建一个新的canvas | |
| var canvas2 = document.createElement("canvas"); | |
| let | |
| _canvas = document.querySelector('div'); | |
| var w = parseInt(window.getComputedStyle(_canvas).width); | |
| var h = parseInt(window.getComputedStyle(_canvas).height); | |
| //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 | |
| canvas2.width = w * 2; | |
| canvas2.height = h * 2; | |
| canvas2.style.width = w + "px"; | |
| canvas2.style.height = h + "px"; | |
| //可以按照自己的需求,对context的参数修改,translate指的是偏移量 | |
| // var context = canvas.getContext("2d"); | |
| // context.translate(0,0); | |
| var context = canvas2.getContext("2d"); | |
| context.scale(2, 2); | |
| html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) { | |
| $('.sc').attr('src',canvas.toDataURL()) | |
| if($('.sc').attr('src')!=''){ | |
| $('.test').addClass('active') | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
抓取html 生成图片的更多相关文章
- [Java]使用HttpClient实现一个简单爬虫,抓取煎蛋妹子图
第一篇文章,就从一个简单爬虫开始吧. 这只虫子的功能很简单,抓取到”煎蛋网xxoo”网页(http://jandan.net/ooxx/page-1537),解析出其中的妹子图,保存至本地. 先放结果 ...
- 分享一个c#t的网页抓取类
using System; using System.Collections.Generic; using System.Web; using System.Text; using System.Ne ...
- 用WebRequest +HtmlAgilityPack 从外网抓取数据到本地
相信大家对于WebRequest 并不陌生,我们在C#中发请求的方式,就是创建一个WebRequest .那么如果我们想发一个请求到外网,比如国内上不了的一些网站,那么该怎么做呢? 其实WebRequ ...
- Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)
概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerkon/article/details/50868 ...
- [转]Fiddler抓取Android真机上的HTTPS包
此篇文章转载自:http://blog.csdn.net/roland_sun/article/details/30078353 工作中经常会需要对一些app进行抓包, 但是每次默认都是只抓http请 ...
- 爬虫技术 -- 进阶学习(十)网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)
最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...
- Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)
概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容.主要是对电脑笔记本以及他们的属性进行抓取,然后在使用nodejs进行下载图片和插入数据库操作. ...
- 网络爬虫:使用Scrapy框架编写一个抓取书籍信息的爬虫服务
上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...
- 网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(3): 抓取amazon.com价格
通过上一篇随笔的处理,我们已经拿到了书的书名和ISBN码.(网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(2): 抓取allitebooks.com书籍信息 ...
随机推荐
- C语言 · 数字黑洞
算法提高 数字黑洞 时间限制:1.0s 内存限制:256.0MB 问题描述 任意一个四位数,只要它们各个位上的数字是不全相同的,就有这样的规律: 1)将组成该四位数的四个数字由大到小 ...
- mac 环境变量
在 ~/.bash_profile 中添加一行: export PATH=$PATH:/usr/local/bin 其中,/usr/local/bin 为需要添加的 path 执行 source .b ...
- 字节输入流:io包中的InputStream为所有字节输入流的父类。
字节输入流:io包中的InputStream为所有字节输入流的父类. Int read();读入一个字节(每次一个): 可先使用new byte[]=数组,调用read(byte[] b) read ...
- Laravel 添加路由文件
在laravel 5.4中的routes文件夹里面默认有两个路由文件web.php和api.php. 新建路由文件 我们在routes文件夹下多创建一个admin.php文件作为管理后台的路由 修改R ...
- C#二分查找算法设计实现
C#二分查找算法设计实现 1.介绍 二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法.但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列.(记住了 ...
- GBDT 详解分析 转+整理
GBDT DT 回归树 Regression Decision Tree 梯度迭代 GBDT工作过程实例 需要解释的三个问题 - 既然图1和图2 最终效果相同,为何还需要GBDT呢? - Gradie ...
- mysql中的多表查询
基本模式:t1 CROSS JOIN t2, t1 INNER JOIN T2 ON ,以及LEFTJOIN 和RIGHT JOIN. 这些都需要在实践中使用,多练习才行. 写一句sql语句:SELE ...
- 11.17 luffycity(7)完结
2018-11-17 15:59:01 路飞项目已经完结!后面已是flask的学习!然后还有十几天的课程等回学校再看 明天归校!! 开始全面整理自己学习的知识,整理博客!还有好多面试题!233333 ...
- 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...
- Java课程课后作业02之动手动脑
一.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数 数学算法原理: 可以使用的方法:Math中的random类以及random类,区别:Math中的random类只能用于生成随机数 ...