没有合适的资源?快使用搜索试试~ 我知道了~
首页html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
10 下载量 22 浏览量
更新于2023-05-11
收藏 52KB PDF 举报
为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为大家提供了一个实例
资源详情
资源推荐
html2canvas属性和使用方法以及如何使用属性和使用方法以及如何使用html2canvas将将HTML内容写入内容写入Canvas
生成图片生成图片
为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为
大家提供了一个实例
如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js
html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。
html2canvas.js可以将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当
浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。
以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。
基本语法
html2canvas(element, options);
html2canvas(document.body, {
onrendered: function(canvas) {
var url = canvas.toDataURL();//图片地址
document.body.appendChild(canvas);
},
width: 300,
height: 300
或者使用ES6的promise
//两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});
html2canvas基本参数说明
参数名称参数名称 类型类型 默认值默认值 描述描述
allowTaint boolean false Whether to allow cross-origin images to taint the canvas---允许跨域
background string #fff
Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色,如果没有设定默认
透明
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
logging boolean false Whether to log events in the console.---在console.log()中输出信息
proxy string undefined
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地
址
taintTest boolean true Whether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟,默认延迟为0,单位毫秒
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--这个我也不知道是干嘛的
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
console.log('test');
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
// width: 300,
// height: 300
});
}
</script>
<body>
<div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
<input type="button" value="截图" onclick="takeScreenshot()">
</div>
</body>
</html>
效果图如下:
截图效果如下:
最后附上html2canvas官网链接
官网
Github
weixin_38680475
- 粉丝: 6
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 中文翻译Introduction to Linear Algebra, 5th Edition 2.1节
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功