html2canvas截取页面
1.下载html2canvas.js 2.引入 3.修改html2canvas支持远程图片处理 function ImageContainer(src, cors) { this.src = src; this.image = new Image(); var self = this; this.tainted = null; this.promise = new Promise(function(resolve, reject) { self.image.onload = resolve; self.image.onerror = reject; if (cors) { //self.image.crossOrigin = "anonymous";//1.去掉此处的anonymous代码改为空 self.image.crossOrigin = ""; } //self.image.src = src;//2.在源src后面添加一个随机数如时间戳+"?"+new Date().getTime(); self.image.src = src+"?"+new Date().getTime(); if (self.image.complete === true) { resolve(self.image); } }); } 4.保存成base64，并处理 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>群二维码名片</title> <link rel="stylesheet" href="../css/aui.2.0.css"> <link rel="stylesheet" href="../css/message_style.css"> </head> <body> <header class="aui-bar aui-bar-nav aui-margin-b-15"> <a class="aui-pull-left aui-btn" onclick="closeWin();"> <span class="aui-iconfont aui-icon-left">返回</span> </a> <div class="aui-title">群二维码</div> </header> <div id="info_area"></div> <script id="info_tmpl" type="text/html/x-dot-template"> <div class="s_cardbg"> <div class="s_card" id="qrcode_card"> <header> <img src="{{= it.groupAvatar}}"/> <span>{{= it.groupName}}</span> </header> <img id="qrcode_img" src="{{= it.qrcode}}" class="s_code"/> </div> </div> <div class="s_carbtnbg"> <div class="s_caranimation"> <button id="save">保存图片</button> <button class="s_sarcancel">取消</button> </div> </div> </script> </body> <script type="text/javascript" src="../script/api.js"></script> <script type="text/javascript" src="../script/jquery.min.js"></script> <script type="text/javascript" src="../script/config.js"></script> <script type="text/javascript" src="../script/common.js"></script> <script type="text/javascript" src="../script/doT.min.js"></script> <script type="text/javascript" src="../script/html2canvas.js"></script> <script> apiready = function () { fix_status_bar(); var groupId = api.pageParam.groupId; var groupName = api.pageParam.groupName; var groupAvatar = api.pageParam.groupAvatar; var qrcode = BASE_URL_ACTION + '/Common/GetQrCode?dataId='+groupId+'&dataType=2&prefix=add'; var data = {}; data.groupId = groupId; data.groupName = groupName; data.groupAvatar = groupAvatar; data.qrcode = qrcode; var interText = doT.template($("#info_tmpl").text()); $("#info_area").html(interText(data)); $(".s_code").on("touchstart",function(){ $(".s_carbtnbg").show(); }) $(".s_sarcancel").on("click",function(){ $(".s_carbtnbg").hide() }) $("#save").on("click", function () { html2canvas($("#qrcode_card"), { height: $("#qrcode_card").outerHeight() + 20, onrendered: function (canvas) { var url = canvas.toDataURL("image/png"); var base64str = url.substr(22); //以下代码为下载此图片功能 // $("#qrcode_img").attr('src',url); var trans = api.require('trans'); trans.saveImage({ base64Str : base64str, album : true, imgPath : "fs://" }, function(ret, err) { if (ret.status) { toast('保存成功'); $(".s_carbtnbg").hide(); } }); },useCORS:true}); }); } </script> </html> 实现了web截图，效果不错！！！ 本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/7201289.html，如需转载请自行联系原作者
