抓取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书籍信息 ...
随机推荐
- CUDA编程之快速入门
CUDA(Compute Unified Device Architecture)的中文全称为计算统一设备架构.做图像视觉领域的同学多多少少都会接触到CUDA,毕竟要做性能速度优化,CUDA是个很重要 ...
- keras 设置GPU使用率
import tensorflow as tffrom keras.backend.tensorflow_backend import set_session config = tf.ConfigP ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- 【转载】Elasticsearch 5.x 字段折叠的使用,广度搜索
https://elasticsearch.cn/article/132 备注,分组字段只能是 keyword或num类型,不能是text类型 在 Elasticsearch 5.x 有一个字段折叠( ...
- VMware Workstation 14.1.1 精简特别版
VMware Workstation 精简特别版,由卡饭网友のcuiplay精简制作,集成许可证密钥安装即永久激活,该特别版最大特色可安装MAC OS X客户操作系统,此外添加了DELL SLIC 2 ...
- JSON API免费接口(转)
电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...
- CRC码计算及校验原理的最通俗诠释
5.3.2 循环冗余校验检错方案 奇偶校验码(PCC)只能校验一位错误,本节所要介绍的循环冗余校验码(CRC)的检错能力更强,可以检出多位错误. 1. CRC校验原理 CRC校验原理看起来比 ...
- 【Clojure 基本知识】小技巧s
;;模拟console原位更新输出 ;;空格擦除法,输出空格,是为了擦除短字符串尾部没有占用的位置,因为退格只是回退,并不删除(dotimes [_ 10](let [n (rand) sn (.su ...
- 一个自定义python分布式专用爬虫框架。支持断点爬取和确保消息100%不丢失,哪怕是在爬取进行中随意关停和随意对电脑断电。
0.此框架只能用于爬虫,由框架来调度url请求,必须按照此方式开发,没有做到类似celery的通用分布式功能,也不方便测试.可以使用另外一个,基于函数式编程的,调度一切函数的分布式框架,做到了兼容任何 ...
- 《转载》强大全面的C++框架和库推荐!
C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...