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


Posted in Javascript onJanuary 12, 2020

如何使用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属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

截图效果如下:

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

最后附上html2canvas官网链接

官网

Github

Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
原生js实现放大镜特效
Mar 08 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
ES2020 新特性(种草)
Jan 12 #Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 #Javascript
es6 for循环中let和var区别详解
Jan 12 #Javascript
js 计数排序的实现示例(升级版)
Jan 12 #Javascript
JS实现动态无缝轮播
Jan 11 #Javascript
原生js实现无缝轮播图
Jan 11 #Javascript
JS实现轮播图效果
Jan 11 #Javascript
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
Python求解平方根的方法
2015/03/11 Python
浅析python中的分片与截断序列
2016/08/09 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
公司周年庆典标语
2014/10/07 职场文书
南京大屠杀观后感
2015/06/02 职场文书
汽车销售员工作总结
2015/08/12 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers