zoukankan      html  css  js  c++  java
  • 抓取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 {
      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>
  • 相关阅读:
    opencv访问图像像素
    利用chrome浏览器的proxy switchy扩展智能切换代理
    一些linux命令【ubuntu】
    如何从 Ubuntu 10.04 升级到 10.10
    关于“无法获得排它锁 ”的解决办法
    【ubuntu】Grub2配置详解(转)
    BibTeX使用介绍
    【ubuntu】imagemagick用法
    ubuntu环境下安装OpenCV
    安装wordpress
  • 原文地址:https://www.cnblogs.com/cxcoder/p/9172045.html
Copyright © 2011-2022 走看看