使用 html2canvas 只需几行代码就能生成网页截图和海报

网页上生成一个便于用户分享的精美海报，或者对于网页内容生成截图，现在已经是一个非常常见的需求，现在怎么实现呢？

生成海报很麻烦

生成网页截图和海报一般都有两种做法，一是服务端使用 GD 库生成，二是前端使用 Canvas 生成，但是这两种方法都比较麻烦。

服务端通过 GD 库去生成的话，首先要去查 GD 库相关的大量函数，然后图片的坐标，文字的换行等等都要仔细去算，一点点修改，都要重新算一遍，非常难受。

而前端使用 Canvas 生成的话，就需要熟悉 Canvas 的语法，它的 API 比较复杂，有大量的方法和属性，让很多希望通过 Canvas 画图的同学望而却步。

那么有没有什么简单的方法生成海报呢？不需要学习太多新知识，利用现有的知识就实现的呢？

html2canvas

有的，html2canvas 就是这样的一个 Javascript 库，无需大量学习，只需要会 HTML 和 CSS 即可，html2canvas 可以把网页元素或者整个网页转换为一个 Canvas 对象或者图片。

html2canvas 是通过在浏览器端解析 HTML 和 CSS 来实现这个功能，不需要任何服务器端的支持，然后也不需要对 Canvas 相关的方法深入的学习，只需要懂简单的 HTML 和 CSS 即可。

总结一下，下面是 html2canvas 的一些主要优势：

无需后端支持：html2canvas 完全在客户端运行，无需任何服务器端的支持。这使得它非常适合在各种环境中使用，包括静态网页和单页应用。
灵活且强大：你可以指定截图的元素，包括整个网页或者特定的 DOM 元素。此外，html2canvas 还支持多种 CSS 属性，包括 z-index、overflow、CSS transforms 和 CSS filters 等。
跨浏览器兼容性：html2canvas 支持所有主流的浏览器，包括 Chrome、Firefox、Safari 和 IE11+。
丰富的功能：html2canvas 提供了一系列的选项和API，使得你可以对截图过程进行深度定制，包括修改截图的尺寸、忽略特定元素、添加背景颜色等。
源码开放：html2canvas 是开源的，你可以查看和修改它的源代码，甚至为它贡献代码。

但是也需要注意的是，由于 html2canvas 是通过解析 HTML 和 CSS 来生成截图的，所以它无法完美地复制所有的渲染效果，特别是一些复杂的 CSS 样式和动态内容。

几行代码

首先加载 html2canvas 对应的 JavaScript 库：

<script type='text/javascript' src='https://cdn.staticfile.org/html2canvas/1.4.1/html2canvas.js'></script>

然后选择对应的网页元素生成屏幕截图：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

就是这么简单，几行代码就实现。

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Clappr 是一个可扩展的网络媒体播放器。

Clappr 是一个可扩展的网络媒体播放器。您的架构主要被投射到插件中，通过设计为项目添加低耦合性，并且可以轻松添加无限功能。

Clappr 默认使用HTMLVideoElement来保证对许多平台的支持。您可以扩展默认的 HTML5 播放或播放界面以创建一种新的媒体支持，就像插件一样！

HTMLVideoElement地址：https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement

Clappr用法

通过脚本标签：

在您的 HTML 中添加以下脚本：

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
</head>

现在，创建播放器：

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
  </script>
</body>

通过 npm 模块：

该项目在 npm 上可用，网址为https://www.npmjs.com/package/@clappr/core

yarn install @clappr/core --save-dev

您应该使用以下选项指定资产所在位置的基本 URL baseUrl：

  var player = new Clappr.Player({
  	source: "http://your.video/here.mp4",
	  baseUrl: "http://example.com/assets/clappr"
  });

在上述情况下，Clappr 将期望所有资产（在 dist 文件夹中）都可以在“ http://example.com/assets/clappr-core ”访问。您需要baseUrl在构建过程中安排要定位的资产。

为webpack安装：

默认情况下，webpack 将查看该main字段package.json并使用项目的构建版本。如果这就是你想要的，那么你就没有什么可做的了。

如果您想在构建过程中将 Clappr 自己构建到您的项目中，请将以下内容添加到您的 webpack 配置中：

resolve: {
    alias: { Clappr: '@clappr/core/src/main.js' },
    root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
    extensions: ['', '.js'],
}

API 文档

player.attachTo(element)

您可以使用此方法将播放器附加到给定元素。parentId在传递参数的播放器实例化期间指定它时，您不需要这样做。

player.play()

播放当前源。

player.pause()

暂停当前源。

player.stop()

停止当前源。

player.mute()

使当前源静音。

player.unmute()

取消静音当前源。

player.seek(value)

寻找当前视频 ( source)。例如，player.seek(120)将搜索到当前视频的第 120 秒（2 分钟）。

player.seekPercentage(value)

寻找当前视频 ( source)。例如，player.seek(50)将寻找到当前视频的中间。

player.isPlaying()

true如果当前源正在播放，则返回，否则返回false。

player.getPlugin(pluginName)

返回插件实例。例子：

var strings = player.getPlugin('strings');

此方法按名称搜索Core和Container插件并返回找到的第一个。

player.getCurrentTime()

返回当前源的当前时间（以秒为单位）。

player.getDuration()

返回当前源的持续时间（以秒为单位）。

player.resize(size)

调整当前播放器画布的大小。size参数应该是带有heightand的文字对象width。例子：

player.resize({height: 360, width: 640});

player.destroy()

销毁当前播放器并将其从 DOM 中移除。

player.load(source)

加载新源。

player.configure(options)

允许在创建播放器后对其进行配置。

Clappr配置

下面列出的所有参数都应添加到Clappr.Player对象实例化或通过player.configure.

例子：

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  parameter1: "value1",
  parameter2: "value2",
});

// or

player.configure({
  parameter3: "value3",
  parameter4: "value4",
})

请注意，通过configure的某些选项不会立即应用。在这种情况下，这些选项将在下一个视频中应用。

Clappr内置插件

媒体控制

一个在视频容器上呈现界面并添加控制播放操作（播放、暂停、停止）的可能性的插件。

点击暂停

添加通过单击容器元素在play/播放状态之间切换的可能性。

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  // Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter
  clickToPauseConfig: { 
    onClickPayload: { any: 'any' } // sends the payload to container when clicked
});

隐藏式字幕

添加了自定义字幕标签和标题的可能性。

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  closedCaptionsConfig: {
    title: 'Subtitles', // default is none
    ariaLabel: 'Closed Captions', // Default is 'cc-button'
    labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
  },
});

海报

通过将海报选项添加到 Clappr 播放器来定义海报图像。它会在视频嵌入后出现，在播放时消失，并在用户停止视频时返回。对于音频广播，海报在播放时保持可见。

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  poster: "http://url/img.png"
});

寻求时间

当鼠标悬停在媒体控件搜索栏上时通知当前时间。

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  // Only for live stream with DVR
  actualLiveTime: true, // default is false
  // Meant to be used with actualLiveTime
  actualLiveServerTime:  "2015/11/26 06:01:03" // default is current date
});

水印

在视频上添加水印。在您的嵌入参数上放置watermark选项以自动在您的视频上添加水印。通过定义position选项选择角位置。位置可以是bottom-left、bottom-right和top-left。top-right要定义单击水印时要打开的 URL，请使用watermarkLinkoption。如果watermarkLink未定义参数，水印将不可点击。

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  watermark: "http://url/img.png",
  position: 'top-right',
  watermarkLink: "http://example.net/"
});

—END—

开源地址：https://github.com/clappr/clappr

JS数据类型转换好学吗？Web前端人才要掌握什么？JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上，是一个优秀的Web前端人才必须要掌握的知识点。JavaScript中涉及的知识点很多，其中数据类型转换让很多人苦恼不已，下面小编就给大家详细的讲解一下。

JavaScript数据类型

Number：指的是数字，可以为整型，也可以是浮点数。

string字符串：由零个或多个字符构成，字符包括字母、数字、标点符号和空格，需要注意的是字符串必须放在引号里(单引号或双引号)。

boolean布尔型：数据只能有两种值true和false，在JavaScript中true和false：是关键字，通常我们设置布尔值时多用于条件的判断。

underfine：通常指的是没有赋值的变量，通过typeof可以对数据的类型进行判断。

Null：是一个只有一个值的特殊类型，表示一个空对象引用。

object对象：是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体，常见的对象有array、window、document等。

JavaScript类型转换方式

在JavaScript中我们经常需要知道某些变量的数据类型，并将其转换为我们所需要的数据类型。转换的方式可分为两种：

1、显式转换：是通过手动进行类型转换，Javascript提供了以下转型函数：

转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat(string);

转换为字符串类型：toString(radix)、String(mix);

转换为布尔类型：Boolean(mix)。

2、隐式转换：有时候即使我们不提供显示转换，Javascript也会进行自动类型转换，主要情况有：

用于检测是否为非数值的函数：isNaN(mix);

递增递减操作符(包括前置和后置)、一元正负符号操作符;

加法运算符、乘除运算符、减号运算符、取模运算符;

逻辑操作符(!、&&、||);

关系操作符(<, >, <=, >=)

相等操作符(==)

常见类型转换方法

1、parseInt()

parseInt() 方法可以根据给定的进制数把一个字符串解析成整数，语法：

parseInt(string[, radix])

string:被解析的值。如果不是一个字符串，则将其转换为字符串。字符串开头的空白符将会被忽略。

radix:一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。总是指定该参数可以保证结果可预测。当忽略该参数时，不同的实现环境可能产生不同的结果。

2、parseFloat()

parseFloat() 函数解析一个字符串参数并返回一个浮点数。语法：

parseFloat(string)

string:需要被解析成为浮点数的字符串。

3、Number()

Number()可以用于任何数据类型，而parseInt()和parseFloat()则专门用于字符串。语法：

Number(value)

当然，除了以上内容，JavaScript类型转换方式海报库一元正号(+)、 Number.prototype.toString()以及一些情景带来的自动类型转换等，在此小编就不一一列举了。

在线咨询

上一篇：一篇文章带你了解CSS3圆角知识
下一篇：如何给HTML标签中的文本设置修饰线

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商