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 ...
随机推荐
- 正则表达式中的/i
i = insensitive means case-insensitive 表示大小写不敏感
- 微信小程序手势滑动卡片案例
最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首 ...
- 什么是面向对象以及其意义，prototpye原型
什么是面向对象: 使用对象时,只关注对象提供的功能,不关注其内部的细节 例如:jquery 什么是对象: 对象是一个整体对外提供一些操作,比如 收音机 面向对象编程OOP的特点: 1.抽象:把主要的特 ...
- JAVA:从public static void main（String args[])開始
我们都知道当你要执行一个JAVA文件的时候必需要有一个main函数. 这是为什么呢? 跟C语言的道理一样,当你执行一个文件的时候.你必需要有一个入口函数或者入口地址,在C里面是main函数.相同的在J ...
- 去除ListView 上下边界蓝色或黄色阴影
默认的情况下,在 ListView 滑动到顶部或者是底部的时候,会有黄色或者蓝色的阴影出现.在不同的版本号上解决办法是不同的,在 2.3 版本号之前能够在 ListView 的属性中通过设置 andr ...
- OpenCASCADE License FAQs
OpenCASCADE License FAQs 经常用人问我使用OpenCASCADE开发商业软件是否需要付费,下面从OpenCASCADE的官方网站上截取其回答翻译成中文,官方网址:https:/ ...
- 创建一个Spring的HelloWorld程序
Spring IOC IOC指的是控制反转,把对象的创建.初始化.销毁等工作都交给Spring容器.由spring容器来控制对象的生命周期.下图能够说明我们传统创建类的方式和使用Spring之后的差别 ...
- FZOJ--2221-- RunningMan（水题）
Problem 2221 RunningMan Accept: 4 Submit: 10 Time Limit: 1000 mSec Memory Limit : 32768 KB Pro ...
- grpc编译错误解决
berli@berli-VirtualBox:~/grpc$ make [MAKE] Generating cache.mk [C] Compiling src/core/lib/s ...
- 如何使 nginx 支撑更高并发
/** * * * * 如何使 nginx 支撑更高的并发? * 原理: * 服务器方面可以从两个方面阐述: * 1.socket 链接方面:因为每次请求都是一次连接,而 nginx 服务器配置方面默 ...