html2canvas属性和使⽤...
如何使⽤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 = DataURL();//图⽚地址
document.body.appendChild(canvas);
},
width: 300,
height: 300
或者使⽤ES6的promise
//两个参数：所需要截图的元素id，截图后要执⾏的函数， canvas为截图后返回的最后⼀个canvas ElementById('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 transp
arent---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 number0Timeout 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--这个我也不知道是⼲嘛的例⼦html document是什么
<!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');
ElementById('view'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
// width: 300,
// height: 300
});
}
</script>
<body>
<div id="view" >
<input type="button" value="截图" onclick="takeScreenshot()">
</div>
</body>
</html>
效果图如下：
截图效果如下：
最后附上html2canvas官⽹链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。