亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

原生JS實(shí)現(xiàn)視頻截圖功能的示例代碼

 更新時(shí)間：2023年11月16日 10:39:13   作者：Marco-hui  
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)原生JavaScript實(shí)現(xiàn)視頻截圖功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考一下

視頻截圖效果預(yù)覽

利用Canvas進(jìn)行截圖

要用原生js實(shí)現(xiàn)視頻截圖，可以利用canvas的繪圖功能 ctx.drawImage，只需要獲取到視頻標(biāo)簽，就可以通過(guò)drawImage把視頻當(dāng)前幀圖像繪制在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)

接下來(lái)，需要把畫布轉(zhuǎn)化為圖片，canvas提供了兩個(gè)2D轉(zhuǎn)換為圖片的方法：canvas.toDataURL()和canvas.toBlob()

canvas.toDataURL(mimeType, qualityArgument)方法

toDataURL可以把圖片轉(zhuǎn)換成base64格式的圖片，是一個(gè)同步方法，使用很簡(jiǎn)單，在上面已經(jīng)繪制好畫布的基礎(chǔ)上，只需要下面一行代碼就可以獲取到當(dāng)前視頻幀的截圖了

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

可以看到，它最終生成了一個(gè)很長(zhǎng)字符串的base64圖片地址。

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

這個(gè)方法相比上一個(gè)方法的優(yōu)點(diǎn)是它是異步的，所以有一個(gè)callback回調(diào)，這個(gè)callback回調(diào)方法默認(rèn)的第一個(gè)參數(shù)就是轉(zhuǎn)換好的blob文件信息，本文也想重點(diǎn)介紹這種方法的使用。

先說(shuō)明一下這個(gè)方法的三個(gè)參數(shù)：

參數(shù)類型是否必傳說(shuō)明
callbackFunction是toBlob()方法執(zhí)行成功后的回調(diào)方法，支持一個(gè)參數(shù)，表示當(dāng)前轉(zhuǎn)換的Blob對(duì)象
mimeTypeString否表示需要轉(zhuǎn)換的圖像的mimeType類型。默認(rèn)值是image/png，還可以是image/jpeg，甚至image/webp（前提瀏覽器支持）等
qualityArgumentNumber否表示轉(zhuǎn)換的圖片質(zhì)量。范圍是0到1。由于Canvas的toBlob()方法轉(zhuǎn)PNG是無(wú)損的，因此，此參數(shù)默認(rèn)是沒(méi)有效的，除非，指定圖片mimeType是image/jpeg或者image/webp，此時(shí)默認(rèn)壓縮值是0.92

使用寫法如下：

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

可以看到方法執(zhí)行得到的是當(dāng)前轉(zhuǎn)換的Blob對(duì)象

那么剩下的就是要將此Blob對(duì)象進(jìn)一步轉(zhuǎn)化為可供img顯示的圖片地址。

將Blob對(duì)象轉(zhuǎn)化為圖片地址

下面介紹三種方法進(jìn)行轉(zhuǎn)化：

方式一： 通過(guò)URL.createObjectURL()方法將Blob轉(zhuǎn)化為URL

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

如下圖所示，轉(zhuǎn)化得到的是一個(gè)bold流的圖片地址。

方式二： 通過(guò)FileReader將Blob轉(zhuǎn)化為DataURL

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

如下圖所示，轉(zhuǎn)化得到的是一個(gè)base64的圖片地址。

方式三： 通過(guò)ajax將Blob上傳到服務(wù)器

canvas.toBlob((blob) => {
	const formData = new FormData()
    formData.append('file', blob) // 這里的'file'是接口接收參數(shù)的字段名，需要根據(jù)實(shí)際情況改變
    const xhr = new XMLHttpRequest()
    xhr.onload = () => {
      const imageUrl = JSON.parse(xhr.responseText).data // 接口回調(diào)參數(shù)，需要根據(jù)實(shí)際情況處理
      console.log(3, imageUrl)
    }
    xhr.open('POST', '/api/upload', true) // '/api/upload'是上傳接口，需要根據(jù)實(shí)際情況改變
    xhr.send(formData)
}, 'image/webp', 1)

由此就會(huì)將圖片上傳到你的文件服務(wù)器里，最終可以得到一個(gè)你自己文件服務(wù)器下對(duì)應(yīng)的圖片地址。

toBlob()方法的兼容

首先，toBlob()方法IE9瀏覽器不支持，因?yàn)锽lob數(shù)據(jù)格式IE10+才支持。

然后，對(duì)于IE瀏覽器，toBlob()的兼容性有些奇怪，IE10瀏覽器支持ms私有前綴的toBlob()方法，完整方法名稱是msToBlob()。而IE11+，toBlob()方法卻不支持。

但是，我們可以基于toDataURL()方法進(jìn)行polyfill，性能相對(duì)會(huì)差一些，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' }))
      })
    }
  })
}

注意事項(xiàng)

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

<video className="videoTag" crossOrigin='anonymous' controls>
     <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4' />
</video>
<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()

否則會(huì)報(bào)以下錯(cuò)誤：

完整封裝示例

最后，給出一個(gè)利用toBlob進(jìn)行視頻截圖，最終獲取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) => {
        // 通過(guò)FileReader將Blob轉(zhuǎn)化為DataURL
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = () => {
          const imageUrl = reader.result
          resolve(imageUrl)
        }
      }, 'image/webp', 1) // 根據(jù)需要可以自行配置這里的兩個(gè)參數(shù)
    })
}

調(diào)用方法：

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

以上就是原生JS實(shí)現(xiàn)視頻截圖功能的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS視頻截圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論