<!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. Linux iptables原理和使用

    1.原理 iptables简介 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵 ...

  2. gsoap内存管理与释放

    (一)gSoap客户端调用WebService完成后注意内存释放顺序 //Soap资源清理 soap_destroy(soap_sp.get()); //清理反序列化的类实例 soap_end(soa ...

  3. Attacks for RL

    1. http://rll.berkeley.edu/adversarial/   Adversarial Attacks on Neural Network Policies 就是对test时候的p ...

  4. 【深入Java虚拟机】二 类加载与双亲委派

    https://blog.csdn.net/zhangliangzi/article/details/51338291  -参考 双亲委派过程:当一个类加载器收到类加载任务时,立即将任务委派给它的父类 ...

  5. 深度学习中交叉熵和KL散度和最大似然估计之间的关系

    机器学习的面试题中经常会被问到交叉熵(cross entropy)和最大似然估计(MLE)或者KL散度有什么关系,查了一些资料发现优化这3个东西其实是等价的. 熵和交叉熵 提到交叉熵就需要了解下信息论 ...

  6. maridb 10.3 主从复制,待机情况下从库 cpu 占用率高的处理方法

    发现两台从库,一直都在CPU 占用率 60% 90% 中浮动, 但是写库却很正常.搜了一大把没找到答案,把参数测试了一下得出以下结论 slave  my.cnf 添加如下参数 #只读模式 read_o ...

  7. python __get__ & __set__

    目的:  提供类似java中的getter/setter的东西. (getter/setter的目的: 将属性方法化,使得属性的引用变得简单---尤其将来属性的读取/赋值有比较复杂的逻辑) 官方简明文 ...

  8. 在node环境使用axios发送文件

    yarn add form-data (async () => { const l = console.log; const axios = require("axios") ...

  9. [Codeforces Round #221 (Div. 1)][D. Tree and Queries]

    题目链接:375D - Tree and Queries 题目大意:给你一个有n个点的树,每个点都有其对应的颜色,给出m次询问(v,k),问v的子树中有多少种颜色至少出现k次 题解:先对所有的询问进行 ...

  10. Oracle数据库实例的启动及关闭

    要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用SYS用户以SYSDBA连接来启动和关闭数据库.下面介绍Oracle数据库几 ...