遇到一個(gè)需求，要對(duì)播放的視頻進(jìn)行截圖，視頻使用video標(biāo)簽來(lái)播放，然后點(diǎn)擊視頻播放區(qū)域時(shí)截取實(shí)時(shí)的幀圖片。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var video = document.getElementById('video');
-
- var canvas = document.getElementById('canvas');
-
- var ctx = canvas.getContext('2d');
-
- var img = document.getElementById('img');
-
- function snapshot() {
- ctx.drawImage(video,0,0);
- img.src = canvas.toDataURL('image/png');
- }
-
- video.addEventListener('click', snapshot, false);
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
經(jīng)過(guò)查閱和分析，發(fā)現(xiàn)這個(gè)其實(shí)是由于視頻文件所在的域和圖片和頁(yè)面所在域不同，出現(xiàn)跨域傳輸?shù)膯?wèn)題。
