1.下载html2canvas.js

2.引入

3.修改html2canvas支持远程图片处理

  1. function ImageContainer(src, cors) {
  2.         this.src = src;
  3.         this.image = new Image();
  4.         var self = this;
  5.         this.tainted = null;
  6.         this.promise = new Promise(function(resolve, reject) {
  7.             self.image.onload = resolve;
  8.             self.image.onerror = reject;
  9.             if (cors) {
  10.                 //self.image.crossOrigin = "anonymous";//1.去掉此处的anonymous代码改为空
  11.                 self.image.crossOrigin = "";
  12.             }
  13.             //self.image.src = src;//2.在源src后面添加一个随机数如时间戳+"?"+new Date().getTime();
  14.             self.image.src = src+"?"+new Date().getTime();
  15.             if (self.image.complete === true) {
  16.                 resolve(self.image);
  17.             }
  18.         });
  19.     }

4.保存成base64，并处理

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="utf-8">
  5.     <meta name="viewport"
  6.           content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>群二维码名片</title>
  9.     <link rel="stylesheet" href="../css/aui.2.0.css">
  10.     <link rel="stylesheet" href="../css/message_style.css">
  11. </head>
  12. <body>
  14. <header class="aui-bar aui-bar-nav aui-margin-b-15">
  15.     <a class="aui-pull-left aui-btn" onclick="closeWin();">
  16.         <span class="aui-iconfont aui-icon-left">返回</span>
  17.     </a>
  18.     <div class="aui-title">群二维码</div>
  19. </header>
  21. <div id="info_area"></div>
  23. <script id="info_tmpl" type="text/html/x-dot-template">
  24. <div class="s_cardbg">
  25.     <div class="s_card" id="qrcode_card">
  26.         <header>
  27.             <img src="{{= it.groupAvatar}}"/>
  28.             <span>{{= it.groupName}}</span>
  29.         </header>
  30.         <img id="qrcode_img" src="{{= it.qrcode}}" class="s_code"/>
  31.     </div>
  32. </div>
  33. <div class="s_carbtnbg">
  34.     <div class="s_caranimation">
  35.         <button id="save">保存图片</button>
  36.         <button class="s_sarcancel">取消</button>
  37.     </div>
  38. </div>
  39. </script>
  40. </body>
  41. <script type="text/javascript" src="../script/api.js"></script>
  42. <script type="text/javascript"  src="../script/jquery.min.js"></script>
  43. <script type="text/javascript" src="../script/config.js"></script>
  44. <script type="text/javascript" src="../script/common.js"></script>
  45. <script type="text/javascript" src="../script/doT.min.js"></script>
  46. <script type="text/javascript" src="../script/html2canvas.js"></script>
  48. <script>
  49.     apiready = function () {
  50.         fix_status_bar();
  51.         var groupId = api.pageParam.groupId;
  52.         var groupName = api.pageParam.groupName;
  53.         var groupAvatar = api.pageParam.groupAvatar;
  54.         var qrcode  = BASE_URL_ACTION + '/Common/GetQrCode?dataId='+groupId+'&dataType=2&prefix=add';
  56.         var data = {};
  57.         data.groupId = groupId;
  58.         data.groupName = groupName;
  59.         data.groupAvatar = groupAvatar;
  60.         data.qrcode = qrcode;
  61.         var interText = doT.template($("#info_tmpl").text());
  62.         $("#info_area").html(interText(data));
  64.         $(".s_code").on("touchstart",function(){
  65.             $(".s_carbtnbg").show();
  66.         })
  67.         $(".s_sarcancel").on("click",function(){
  68.             $(".s_carbtnbg").hide()
  69.         })
  71.         $("#save").on("click", function () {
  72.             html2canvas($("#qrcode_card"), {
  73.                 height: $("#qrcode_card").outerHeight() + 20,
  74.                 onrendered: function (canvas) {
  75.                     var url = canvas.toDataURL("image/png");
  76.                     var base64str = url.substr(22);
  77.                     //以下代码为下载此图片功能
  78.                     //                    $("#qrcode_img").attr('src',url);
  80.                     var trans = api.require('trans');
  81.                     trans.saveImage({
  82.                         base64Str : base64str,
  83.                         album : true,
  84.                         imgPath : "fs://"
  85.                     }, function(ret, err) {
  86.                         if (ret.status) {
  87.                             toast('保存成功');
  88.                             $(".s_carbtnbg").hide();
  89.                         }
  90.                     });
  92.                 },useCORS:true});
  93.         });
  95.     }
  97. </script>
  98. </html>

实现了web截图，效果不错！！！

html2canvas截取页面的更多相关文章

  1. selenium - 截取页面图片和截取某个元素的图

    1.截取页面图片并保存 在测试过程中,是有必要截图,特别是遇到错误的时候进行截图. # coding:utf-8 from time import sleep from PIL import Imag ...

  2. JS去空格、截取页面url

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  3. html2canvas截取屏幕的方法

    html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行  处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...

  4. JS - 使用 html2canvas 将页面转PDF

    JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...

  5. 在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

  6. JS截取页面，并保存到本地

    想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...

  7. html2canvas将页面内容生成图片

    html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...

  8. JS 使用html2canvas实现页面截图功能

    html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...

  9. Vue使用html2canvas将页面转化为图片

    需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

随机推荐

  1. 树上倍增求LCA

    大概思想就是,节点$i$的第$2^{j}$个父节点是他第$2^{j-1}$个父亲的第$2^{j-1}$个父亲 然后可以$O(nlogn)$时间内解决…… 没了? //fa[i][j]表示i的第2^j个 ...

  2. 【Python常见问题总结】

    1. python2 中 end = '' 取消换行没有用 解决办法: 在程序开始加入 from __future__ import print_function 2. 如何在电脑上同时使用pytho ...

  3. 【转载】spring boot 链接 虚拟机（Linux） redis

    原文:https://www.imooc.com/article/43279?block_id=tuijian_wz 前提是你已经安装redis且支持远程连接,redis的安装这里不再赘述,有需要的可 ...

  4. python基础5（文件操作，with语句）

    打开文件 #使用 open f = open('路径',mode = '打开模式', encoding='编码') #可以使用with语句打开,不需要关闭,可以同时打开多个文件 with open(' ...

  5. 紫书 习题8-19 UVa 1312 （枚举技巧）

    这道题参考了https://www.cnblogs.com/20143605--pcx/p/4889518.html 这道题就是枚举矩形的宽, 然后从宽再来枚举高. 具体是这样的, 先把所有点的高度已 ...

  6. 你的Android应用完全不需要那么多的权限

    Android系统的权限从用户的角度来看有时候的确有点让人摸不着头脑.有时候可能你只需要做一些简单的事情(对联系人的信息进行编辑),却申请了远超你应用所需的权限(比如访问所有联系人信息的权限). 这很 ...

  7. JVM分代通俗解释

    JVM分代通俗解释 学习了:https://www.cnblogs.com/zgghb/p/6428395.html

  8. 整合大量开源库项目（五）跳动的TextView JumpingBeans,良好体验的滚动条ConvenientBanner

    转载请注明出处:王亟亟的大牛之路 时间过得非常快,这一系列已经写了第五篇了(感觉还要写好久).今天又引入了2个非常好用的库JumpingBeans,ConvenientBanner.首先.先看一下效果 ...

  9. 由老同事学习SAP所想到的

    前段时间一位老同事在微信上跟我说他们公司正计划导SAP系统,但整个IT中心几乎无人使用过SAP,知道我在这行业干了多年了,所以想问我怎么开始学习.于是我约他今天出来聊聊,顺便把手里的SAP ECC E ...

  10. vim 插件之NERD tree

    NERD tree 这个插件可以用来快速浏览目录结构,打开文件 地址 http://www.vim.org/scripts/script.php?script_id=1658 https://gith ...