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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python学习基础之循环import及import过程
2018/04/22 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
考试不及格检讨书
2014/01/09 职场文书
材料加工工程求职信
2014/02/19 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS