使用 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小時內與您取得聯系。

整合營銷服務商