潮童街拍

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

 更新时间:2020-01-12 19:00:24   作者:佚名   我要评论(0)

如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js
html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。
html2can

如何使用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="http://files.jb51.net/file_images/article/202001/2020112153748862.jpg?2020012153850" alt="" />

截图效果如下:

最后附上html2canvas官网链接

官网

Github

您可能感兴趣的文章:

  • vue 使用html2canvas将DOM转化为图片的方法
  • js使用html2canvas实现屏幕截取的示例代码
  • Javascript保存网页为图片借助于html2canvas库实现
  • JavaScript实现网页截图功能
  • js+HTML5实现视频截图的方法
  • javascript在网页中实现读取剪贴板粘贴截图功能
  • js实现截图保存图片功能的代码示例
  • JavaScript+html5 canvas实现本地截图教程
  • JS打开摄像头并截图上传示例
  • JS实现div模块的截图并下载功能
  • JS实现预加载视频音频/视频获取截图(返回canvas截图)
  • javascript实现粘贴qq截图功能(clipboardData)

潮童街拍相关的文章

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

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

    如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 html2can
    2020-01-12
  • golang并发编程的实现

    golang并发编程的实现

    go main函数的执行本身就是一个协程,当使用go关键字的时候,就会创建一个新的协程 channel channel 管道,用于在多个协程之间传递信号 无缓存管道 当对无
    2020-01-12
  • python opencv实现信用卡的数字识别

    python opencv实现信用卡的数字识别

    本项目利用python以及opencv实现信用卡的数字识别 前期准备 导入工具包 定义功能函数 模板图像处理 读取模板图像 cv2.imread(img) 灰度化处理 cv2
    2020-01-12
  • 2019年度web前端面试题总结(主要为Vue面试题)

    2019年度web前端面试题总结(主要为Vue面试题)

    毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞
    2020-01-12
  • 深入理解redux之compose的具体应用

    深入理解redux之compose的具体应用

    应用 最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用: import {createStore,apply
    2020-01-12
  • Java使用DateTimeFormatter实现格式化时间

    Java使用DateTimeFormatter实现格式化时间

    用扫描器获取输入的时间(年月日时分),这个时间的格式是常用的格式,然后格式化这个时间,把格式化的时间输出到控制台,可以在控制台重复输入时间.格式化的时间参考企业
    2020-01-12
  • Ranorex通过Python将报告发送到邮箱的方法

    Ranorex通过Python将报告发送到邮箱的方法

    Ranorex测试报告如何发送到邮箱在网上看了下,其实可以通过在Ranorex上或者VS调用编写发送邮箱代码就可以执行发送了,RX主要涉及到的开发语言是C++或者.NET。但是我
    2020-01-12
  • 通过实例解析JMM和Volatile底层原理

    通过实例解析JMM和Volatile底层原理

    这篇文章主要介绍了通过实例解析JMM和Volatile底层原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JMM和
    2020-01-11
  • 浅谈pytorch卷积核大小的设置对全连接神经元的影响

    浅谈pytorch卷积核大小的设置对全连接神经元的影响

    3*3卷积核与2*5卷积核对神经元大小的设置 #这里kerner_size = 2*5 class CONV_NET(torch.nn.Module): #CONV_NET类继承nn.Module类 def __init__(self): super(
    2020-01-11
  • python如何获取apk的packagename和activity

    python如何获取apk的packagename和activity

    这篇文章主要介绍了python如何获取apk的packagename和activity,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-11

最新评论

神马电影网www.hmlhsw.com