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 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
吃通javascript正则表达式
Apr 21 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年的四部动画电影
2020/01/01 欧美动漫
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python range实例用法分享
2020/02/06 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
2015年父亲节活动总结
2015/02/12 职场文书
网络管理员岗位职责
2015/02/12 职场文书
大学生村官个人总结
2015/02/15 职场文书
主持人开场白台词
2015/05/29 职场文书