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截图，效果不错！！！
html2canvas截取页面的更多相关文章
- selenium - 截取页面图片和截取某个元素的图
1.截取页面图片并保存 在测试过程中,是有必要截图,特别是遇到错误的时候进行截图. # coding:utf-8 from time import sleep from PIL import Imag ...
- JS去空格、截取页面url
1. 去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...
- html2canvas截取屏幕的方法
html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行 处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...
- JS - 使用 html2canvas 将页面转PDF
JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...
- 在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...
- JS截取页面，并保存到本地
想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...
- html2canvas将页面内容生成图片
html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...
- JS 使用html2canvas实现页面截图功能
html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...
- Vue使用html2canvas将页面转化为图片
需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...
随机推荐
- POJ-3159 Candies 最短路应用（差分约束）
题目链接:https://cn.vjudge.net/problem/POJ-3159 题意 给出一组不等式 求第一个变量和最后一个变量可能的最大差值 数据保证有解 思路 一个不等式a-b<=c ...
- CF1065D Three Pieces (多元最短路)
题目大意:给你一个棋盘,你需要控制棋子依次经过编号为1~n的所有点,棋子的可以是车,马,象,都依照国际象棋的行棋方式,每走一步消耗1单位时间,但每次更换棋子都需要额外1单位时间,求经过所有点需要的最少 ...
- 《Linux 进程间通信》命名管道：FIFO
命名管道的主要用途:不相关的进程之间交换数据. 命令行上创建命名管道: $ mkfifo filename 程序中创建命名管道: #include <sys/types.h> #incl ...
- java几种远程服务调用协议的比较
原文地址:http://www.cnblogs.com/jifeng/archive/2011/07/20/2111183.html 一.综述 本文比较了RMI,Hessian,Burlap,Http ...
- WPF 内部的5个窗口之 MediaContextNotificationWindow
原文:WPF 内部的5个窗口之 MediaContextNotificationWindow 本文告诉大家在 WPF 内部的5个窗口的 MediaContextNotificationWindow 是 ...
- Tomcat连HBase报错： HTTP Status 500 - java.lang.AbstractMethodError: javax.servlet.jsp.JspFactory.getJspApplicationContext
Tomcat中连接HBase数据库,启动的时候报错: HTTP Status 500 - java.lang.AbstractMethodError: javax.servlet.jsp.JspFac ...
- hadoop-05-mysql修改密码
hadoop-05-mysql修改密码 su root 1,service mysqld start 2,vi /var/log/mysqld.log #在这里面查找密码 3, mysql -uroo ...
- css实现上下左右布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 通过DNS通道传输的交互式PowerShell脚本
摘自:http://www.freebuf.com/sectool/90616.html 欢迎来到一周PowerShell脚本的第五天,今天我们将讨论使用ICMP和DNS的交互式PowerShell脚 ...
- Linux 命令行光标快速选中移动快捷键
Ctrl+Alt+T 打开终端一些常用的终端快捷键:Ctrl+L 清空屏幕(功能相当于命令clear)Ctrl+U 剪切文本直到行的起始(可以用于清空行)Ctrl+K 剪切文本直到行的末尾Ctrl+Y ...