抓取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书籍信息 ...
随机推荐
- js快速排序算法
真正的快速排序算法一: function quickSort(array){ function sort(prev, numsize){ var nonius = prev; var j = nums ...
- 转载记录一个有效的jetbrains激活码
来自:https://blog.csdn.net/ahun535915415/article/details/80687762 K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDS ...
- Modelsim使用常见问题集锦(实时更新)
1.Modelsim使用时出现闪退情况,解决办法:(1)请再次查看modelsim是否破解完全:(2)电脑上安装的文件与Modelsim有冲突,多半是爱奇艺这个软件,删掉爱奇艺软件. 2.再利用mod ...
- unicode、utf8、字符串字面值
发现好多新人都不明白,或者说没有直观的感受,其实很简单. 简单的说,unicode是一种将全球文字都涵盖的字典 - 可以认为每个字符都有一个数字索引. 比如可以这样(假设):'a' 的索引是13,'我 ...
- struts表单域模型注入
表单使用struts标签,表单中每一个字段都可以这样来赋值 类(action).成员变量 这个叫域模型注入 <s:form action="orders" method=&q ...
- javascript转义unicode十六进制编码且带有反斜杠后的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- count(1)、count(*)与count(列名)的执行区别
执行效果: 1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和coun ...
- 《转》Logistic回归 多分类问题的推广算法--Softmax回归
转自http://ufldl.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 简介 在本节中,我们介绍Softmax回归模型,该模型是log ...
- 线程的条件Condiition
条件Condition相当于给锁造钥匙,但是这钥匙是一次性的.一个线程拿到钥匙进去,出来之后钥匙没有归还,而是没了. 如下代码: from threading import Thread, Condi ...
- template.js artTemplate 简洁语法官网下载不了 template.js artTemplate 新下载地址
参考:https://blog.csdn.net/tavatimsa/article/details/82019792