技術標籤：前端分享canvasjshtml5

擷取視訊某一幀作為封面圖片

• • 如何擷取視訊某一幀作為封面圖片

如何擷取視訊某一幀作為封面圖片

// html程式碼
<video id="video" width="300px" controls="controls">
				<source src="xxxx.mp4" />
</video>
<div id="output" style="width:100px;height:100px;border:1px solid #dedede"
 
></div>;

// js程式碼
<script>
  	var video, output
	var scale = 0.8//圖片比例設定
	var test= function() {
		output = document.getElementById('output')
        video = document.getElementById('video')
        video.currentTime = 5 //設定你要擷取的視訊某一刻的幀
        video.setAttribute('crossOrigin', 'anonymous')
 
//設定圖片跨域訪問
        video.addEventListener('loadeddata', getImage)
	}
	var getImage = function() {
		var canvas = document.createElement('canvas')
		canvas.width = video.videoWidth * scale
		canvas.height = video.videoHeight * scale
		canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
 

        var img = document.createElement('img')
        console.log(canvas.toDataURL('image/png'))
		img.src = canvas.toDataURL('image/png')
		output.appendChild(img)
	}
	test()
</script>

canvas繪製圖片，由於瀏覽器的安全考慮，如果在使用canvas繪圖的過程中，使用到了外域的圖片資源，那麼在toDataURL()時會丟擲安全異常：

解決方案1.
如果想使用toDataURL()生成圖片檔案的話，在canvas繪圖過程中使用的圖片應該是當前域下的。

解決方案2.
訪問的伺服器允許，資源跨域使用，也就是說設定了CORS跨域配置，Access-Control-Allow-Origin