原生JS實現視頻截圖

来源:https://www.cnblogs.com/Marco-hui/archive/2023/11/14/17831577.html
-Advertisement-
Play Games

本文介紹使用canvas的drawImage進行視頻截圖,並用toDataURL和toBlob轉化為圖片地址的方法,且重點介紹了將bold信息轉化為圖片地址的方法。 ...


視頻截圖效果預覽

視頻截圖效果

利用Canvas進行截圖

要用原生js實現視頻截圖,可以利用canvas的繪圖功能 ctx.drawImage,只需要獲取到視頻標簽,就可以通過drawImage把視頻當前幀圖像繪製在canvas畫布上。

const video = document.querySelector('video')
const canvas = document.createElement('canvas')
const w = video.videoWidth
const h = video.videoHeight
canvas.width = w
canvas.height = h
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, w, h)

接下來,需要把畫布轉化為圖片,canvas提供了兩個2D轉換為圖片的方法:canvas.toDataURL()canvas.toBlob()

canvas.toDataURL(mimeType, qualityArgument)方法

toDataURL可以把圖片轉換成base64格式的圖片,是一個同步方法,使用很簡單,在上面已經繪製好畫布的基礎上,只需要下麵一行代碼就可以獲取到當前視頻幀的截圖了

const imageUrl = canvas.toDataURL("image/png")
console.log(imageUrl)

toDataURL生成的base64圖片

可以看到,它最終生成了一個很長字元串的base64圖片地址。

canvas.toBlob(callback, mimeType, qualityArgument)方法

這個方法相比上一個方法的優點是它是非同步的,所以有一個callback回調,這個callback回調方法預設的第一個參數就是轉換好的blob文件信息,本文也想重點介紹這種方法的使用

先說明一下這個方法的三個參數:

參數 類型 是否必傳 說明
callback Function toBlob()方法執行成功後的回調方法,支持一個參數,表示當前轉換的Blob對象
mimeType String 表示需要轉換的圖像的mimeType類型。預設值是image/png,還可以是image/jpeg,甚至image/webp(前提瀏覽器支持)等
qualityArgument Number 表示轉換的圖片質量。範圍是0到1。由於Canvas的toBlob()方法轉PNG是無損的,因此,此參數預設是沒有效的,除非,指定圖片mimeType是image/jpeg或者image/webp,此時預設壓縮值是0.92

使用寫法如下:

canvas.toBlob((blob) => {
  console.log(blob)
}, 'image/png', 0.92)

可以看到方法執行得到的是當前轉換的Blob對象
Blob對象

那麼剩下的就是要將此Blob對象進一步轉化為可供img顯示的圖片地址。

將Blob對象轉化為圖片地址

下麵介紹三種方法進行轉化:

方式一: 通過URL.createObjectURL()方法將Blob轉化為URL

canvas.toBlob((blob) => {
  const imageUrl = URL.createObjectURL(blob)
  console.log(1, imageUrl)
}, 'image/jpeg', 1)

如下圖所示,轉化得到的是一個bold流的圖片地址。

blob流圖片地址

方式二: 通過FileReader將Blob轉化為DataURL

canvas.toBlob((blob) => {
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = () => {
    const imageUrl = reader.result
    console.log(2, imageUrl)
  }
}, 'image/webp', 1)

如下圖所示,轉化得到的是一個base64的圖片地址。

base64圖片地址

方式三: 通過ajax將Blob上傳到伺服器

canvas.toBlob((blob) => {
    const formData = new FormData()
    formData.append('file', blob) // 這裡的'file'是介面接收參數的欄位名,需要根據實際情況改變
    const xhr = new XMLHttpRequest()
    xhr.onload = () => {
      const imageUrl = JSON.parse(xhr.responseText).data // 介面回調參數,需要根據實際情況處理
      console.log(3, imageUrl)
    }
    xhr.open('POST', '/api/upload', true) // '/api/upload'是上傳介面,需要根據實際情況改變
    xhr.send(formData)
}, 'image/webp', 1)

由此就會將圖片上傳到你的文件伺服器里,最終可以得到一個你自己文件伺服器下對應的圖片地址。

toBlob()方法的相容

首先,toBlob()方法IE9瀏覽器不支持,因為Blob數據格式IE10+才支持。

然後,對於IE瀏覽器,toBlob()的相容性有些奇怪,IE10瀏覽器支持ms私有首碼的toBlob()方法,完整方法名稱是msToBlob()。而IE11+,toBlob()方法卻不支持。

但是,我們可以基於toDataURL()方法進行polyfill,性能相對會差一些,JavaScript代碼如下:

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var canvas = this
      setTimeout(function() {
        var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] )
        var len = binStr.length
        var arr = new Uint8Array(len)

        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }

        callback(new Blob([arr], { type: type || 'image/png' }))
      })
    }
  })
}

註意事項

使用外部鏈接播放視頻的話需要在視頻標簽上設置允許跨域的處理,添加屬性crossOrigin='anonymous'即可,

<video className="videoTag" crossOrigin='anonymous' controls>
     <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4' />
</video>

或者,在js里處理

const video = document.querySelector(".videoTag")
video.setAttribute('crossOrigin', 'anonymous')
video.load()

否則會報以下錯誤:
跨域報錯

完整封裝示例

最後,給出一個利用toBlob進行視頻截圖,最終獲取base64圖片地址的封裝方法,代碼示例如下:

function getBase64ByVideo(video) {
    const canvas = document.createElement("canvas")
    const w = video.videoWidth
    const h = video.videoHeight
    canvas.width = w
    canvas.height = h
    return new Promise((resolve, reject) => { // 由於toBlob方法是非同步的,所以這裡用Promise
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, w, h)
      canvas.toBlob((blob) => {
        // 通過FileReader將Blob轉化為DataURL
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = () => {
          const imageUrl = reader.result
          resolve(imageUrl)
        }
      }, 'image/webp', 1) // 根據需要可以自行配置這裡的兩個參數
    })
}

調用方法:

const videoTag = document.querySelector(".videoTag")
const dataUrl = await getBase64ByVideo(videoTag)

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 項目應用中需要用mysql執行一下命令行.幾經搜索可以安裝lib_mysqludf_sys插件可以實現 本地window環境安裝(mysql8.0 , 64位 , 使用lib_mysqludf_sys.dll文件) -- 查看環境中插件目錄 show variables like '%plugin% ...
  • NineData DSQL 是針對多個同異構資料庫系統進行跨庫查詢的功能,當前支持對錶和視圖進行 SELECT 操作。您可以在一個查詢中訪問多個資料庫,獲取分散在各個資料庫中的有用信息,並且將這些信息聚合為一份查詢結果返回,輕鬆實現跨多個庫、多個數據源,乃至跨多個異構數據源的數據查詢。 ...
  • 火山引擎DataTester上線的「集成工作台」功能,能夠將DataTester的能力與企業自身的系統進行打通,減少系統之間的多次跳轉。幫助企業打造專屬AB平臺,滿足企業的個性化訴求,大幅降低企業服務的應用成本並提升用戶使用體驗。該功能可以通過完善的引導,進行一站式的定製、發佈、嵌出,幫助企業打造專... ...
  • 原文地址: Android app的暗黑模式適配實現 - Stars-One的雜貨小窩 很久之前放在草稿箱的一篇簡單筆記,是之前藍奏雲批量下載工具Android版本實現暗黑主題的適配記錄 本文所說的這裡的暗黑主題,應該只支持Android10系統,不過我手頭的Flyme系統(Android9)上測試 ...
  • 在日常的 JavaScript 編碼中,我們經常使用解構語法來提取對象中的屬性。假設我們有一個名為 fetchResult 的對象,代表從介面返回的數據,其中包含一個欄位名為 data。 const fetchResult = { data: null }; 在提取 data 欄位時,為了避免介面未 ...
  • vue 最有代表性質的就是.VUE 的文件,每一個vue文件都是一個組件,那麼vue 組件的編譯過程是什麼樣的呢 Vue 單文件組件 (SFC)和指令 ast 語法樹 一個 Vue 單文件組件 (SFC),通常使用 *.vue 作為文件擴展名,它是一種使用了類似 HTML 語法的自定義文件格式,用於 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 Vue2 將在 2023 年年底停止維護了,但是 Vue2 的代碼卻不會在 2023 年消失,還會越來越多;難以想象幾十萬行或者幾百萬行的 Vue2 代碼遷移到 Vue3,這是不可能辦到的; 老一點的前端程式員肯定經歷過把大型項目從 ...
  • 從一個假死頁面引發的思考: 作為前端開發,除了要攻剋頁面難點,也要有更深的自我目標,性能優化是自我提升中很重要的一環; 在前端開發中,會偶遇到頁面假死的現象, 是因為當js有大量計算時,會造成 UI 阻塞,出現界面卡頓、掉幀等情況,嚴重時會出現頁面卡死的情況; ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...