好资源导航 » 文章资讯 » html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

2023-08-03 05:22:04 179

如何使用JS截取HTML页面为图片呢，下面为大家介绍一款JS截图插件html2canvas.js

html2canvas.js能够实现在用户浏览器端直接对整个或部分页面进行截屏。

html2canvas.js可以将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当

浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。

以下浏览器能够很好的支持该脚本：Firefox3.5+,GoogleChrome,Opera新的版本,IE9以上的浏览器。

基本语法

html2canvas(element,options);
html2canvas(document.body,{
onrendered:function(canvas){
varurl=canvas.toDataURL();//图片地址
document.body.appendChild(canvas);
},
width:300,
height:300

或者使用ES6的promise

//两个参数：所需要截图的元素id，截图后要执行的函数，canvas为截图后返回的最后一个canvashtml2canvas(document.getElementById('id')).then(function(canvas){document.body.appendChild(canvas);});

html2canvas基本参数说明

参数名称类型默认值

描述
allowTaint	boolean	false	Whethertoallowcross-originimagestotaintthecanvas---允许跨域
background	string	#fff	Canvasbackgroundcolor,ifnoneisspecifiedinDOM.Setundefinedfortransparent---canvas的背景颜色，如果没有设定默认透明
height	number	null	Definetheheigtofthecanvasinpixels.Ifnull,renderswithfullheightofthewindow.---canvas高度设定
letterRendering	boolean	false	Whethertorendereachletterseperately.Necessaryifletter-spacingisused.---在设置了字间距的时候有用
logging	boolean	false	Whethertologeventsintheconsole.---在console.log()中输出信息
proxy	string	undefined	Urltotheproxywhichistobeusedforloadingcross-originimages.Ifleftempty,cross-originimageswon'tbeloaded.---代理地址
taintTest	boolean	true	Whethertotesteachimageifittaintsthecanvasbeforedrawingthem---是否在渲染前测试图片
timeout	number	0	Timeoutforloadingimages,inmilliseconds.Settingitto0willresultinnotimeout.---图片加载延迟，默认延迟为0，单位毫秒
width	number	null	Definethewidthofthecanvasinpixels.Ifnull,renderswithfullwidthofthewindow.---canvas宽度
useCORS	boolean	false	Whethertoattempttoloadcross-originimagesasCORSserved,beforerevertingbacktoproxy--这个我也不知道是干嘛的

例子







html2canvasexample



functiontakeScreenshot(){
console.log('test');
html2canvas(document.getElementById('view'),{
onrendered:function(canvas){
document.body.appendChild(canvas);
},
//width:300,
//height:300
});
}

效果图如下：

截图效果如下：

最后附上html2canvas官网链接

官网

Github

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

热门推荐

随机推荐