<!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 生成图片的更多相关文章

  1. [Java]使用HttpClient实现一个简单爬虫，抓取煎蛋妹子图

    第一篇文章,就从一个简单爬虫开始吧. 这只虫子的功能很简单,抓取到”煎蛋网xxoo”网页(http://jandan.net/ooxx/page-1537),解析出其中的妹子图,保存至本地. 先放结果 ...

  2. 分享一个c#t的网页抓取类

    using System; using System.Collections.Generic; using System.Web; using System.Text; using System.Ne ...

  3. 用WebRequest +HtmlAgilityPack 从外网抓取数据到本地

    相信大家对于WebRequest 并不陌生,我们在C#中发请求的方式,就是创建一个WebRequest .那么如果我们想发一个请求到外网,比如国内上不了的一些网站,那么该怎么做呢? 其实WebRequ ...

  4. Phantomjs+Nodejs+Mysql数据抓取（2.抓取图片）

    概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerkon/article/details/50868 ...

  5. [转]Fiddler抓取Android真机上的HTTPS包

    此篇文章转载自:http://blog.csdn.net/roland_sun/article/details/30078353 工作中经常会需要对一些app进行抓包, 但是每次默认都是只抓http请 ...

  6. 爬虫技术 -- 进阶学习（十）网易新闻页面信息抓取（htmlagilitypack搭配scrapysharp）

    最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...

  7. Phantomjs+Nodejs+Mysql数据抓取（1.数据抓取）

    概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容.主要是对电脑笔记本以及他们的属性进行抓取,然后在使用nodejs进行下载图片和插入数据库操作. ...

  8. 网络爬虫：使用Scrapy框架编写一个抓取书籍信息的爬虫服务

      上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...

  9. 网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(3): 抓取amazon.com价格

    通过上一篇随笔的处理,我们已经拿到了书的书名和ISBN码.(网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(2): 抓取allitebooks.com书籍信息 ...

随机推荐

  1. HDFS: The short-circuit local reads feature cannot be used

    问题: method:org.apache.hadoop.hdfs.DomainSocketFactory.<init>(DomainSocketFactory.java:69) The ...

  2. 02Spark的左连接

    两个文件,一个是用户的数据,一个是交易的数据. 用户: 交易: 流程如下: 分为以下几个步骤: (1)分别读取user文件和transform文件,并转为两个RDD. * (2)对上面两个RDD执行m ...

  3. laravel5.8笔记五：基类控制器和基类模型

    建立基类的目的就是为了方便继承.比如:Admin模块访问,是否登陆.检测登陆可以写到基类里面 控制器基类 原始基类:app\Http\Controllers\Controller.php,我们下面要做 ...

  4. 【GIS】无人机相关技术（转）

    ---------------------------------------------------------------------------------------------------G ...

  5. OpenGL——天空盒子模型

    加载天空盒子的六个jpg图片,不知道为什么加载不出顶部和底部的jpg图片.没有解决. 加载来自http://www.custommapmakers.org/skyboxes.php的tga图片,没有问 ...

  6. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  7. shell for循环 多个变量

    需求:需要输出以下2开头的端口号和其对应的文件 like: port and port_k8s_xxx.conf 其脚本为: #! /bash/shell #以value_name=(value1 v ...

  8. 一次CTF后对二维码的认识

    前一段时间参加一个CTF比赛的时候其中有一个题目就是一张二维码图片,然后获取其中的信息来解题,那个二维码的特别之处在于,它把3个位置探测区域用几张美女图片代替了,然后在做题的时候顺便简单的了解了一下二 ...

  9. 更改oracle归档模式路径

    1.更改归档路径 在ORACLE10G中,默认的归档路径为$ORACLE_BASE/flash_recovery_area.对于这个路径,ORACLE有一个限制,就是默认只能有2G的空间给归档日志使用 ...

  10. Spring-Boot 内置静态资源文件地址修改

    Spring-Boot 内置MVC静态文件地址修改 Why:1.Spring-Boot修改内置SpringMVC静态资源路径,提高项目目录结构的安全性.2.配置拦截路径时可以剔除静态文件拦截How:1 ...