html2canvas截取页面
2024-08-30 05:14:11
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截图,效果不错!!!
最新文章
- android快捷开发之Retrofit网络加载框架的简单使用
- Linux下的串口编程及非阻塞模式
- TensorFlow白皮书
- SQLServer存储过程和触发器学习记录及简单例子
- 根据字符串生成类---类的类型.self---根据字符串创建控制器对象
- [C#] zdbviewcs: 跨平台数据库查看器。支持SqlServer、Oracle、MySql等数据库
- SSH框架总结(框架分析+环境搭建+实例源码下载)
- 【转】Win 7 下源码运行OpenERP7.0
- 图片原理解说(综合版:JPEG,PNG,BMP,GIF)
- Java多线程之wait(),notify(),notifyAll()
- Android应用程序窗口(Activity)的窗口对象(Window) 的创建过程分析
- 在chrome中使用axure生成原型的问题
- React周末特训班
- 记一次将公司网站http换成https
- input()和print()函数同时输入输出多个数据--python3
- [java,2019-01-15] word转pdf
- 使用kbmmw 实现图形验证码
- JS膏集01
- Github上 vue-element-admin项目配置
- Android技巧分享——如何用电脑下载在Google play中应用的apk文件