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 ...
随机推荐
- STM32为什么必须先配置时钟
首先,任何外设都需要时钟,51单片机,stm32,430等等,因为寄存器是由D触发器组成的,往触发器里面写东西,前提条件是有时钟输入. 51单片机不需要配置时钟,是因为一个时钟开了之后所有的功能都可以 ...
- Android五天乐（第三天）ListFragment与ViewPager
1ListFragment 今天首先学习了一种很经常使用的展示场景:列表展示. 昨天学习了使用Fragmet来取代activity进行设计.今天在托管单个fragment的基础上,掌握托管一个布局li ...
- MySQL具体解释（9）----------索引具体解释
写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点. 考虑例如以下情况.假设数据库中一个表有10^6条记录,DBMS的页面大小为4K.并存储100条记录.假设没有索引, ...
- 利用 border 实现的图片选区效果，只需一层图一蒙层
<html> <style> #p { background: url("http://soso5.gtimg.cn/sosopic_j/0/436416703332 ...
- Cube Simulation zoj3429 模拟
Description Here's a cube whose size of its 3 dimensions are all infinite. Meanwhile, there're 6 pro ...
- spark groupByKey 也是可以filter的
>>> v=sc.parallelize(["one", "two", "two", "three", ...
- hpuoj--校赛--2015年的第一场雪（暴力）
问题 D: 感恩节KK专场--2015年的第一场雪 时间限制: 1 Sec 内存限制: 128 MB 提交: 865 解决: 76 [提交][状态][讨论版] 题目描述 下雪了,KK学长站在三教门 ...
- django admin显示多对多字段
参考文档https://jingyan.baidu.com/article/4e5b3e190f55c591901e24b3.html admin.py from .models import *cl ...
- isInstanceOf，asInstanceOf，classOf[T]
一.scala中把classOf[T]看成Java里的T.class, obj.isInstanceOf[T]看成 obj instanceof T, obj.asInstanceOf[T]看成(T) ...
- 重温前端基础之-css浮动之怪异现象
其实,两种情况中box2的内容都是围绕着浮动元素box1来的. 因为:浮动元素会覆盖块元素,但块元素里的内容(内联盒)不会被覆盖,而是围绕着浮动盒. 将box1的背景色去掉,真相就大白了: 此时发现, ...