雷火电竞-中国电竞赛事及体育赛事平台

歡迎來到入門教程網(wǎng)!

CSS/HTML

當(dāng)前位置:主頁 > 網(wǎng)頁制作 > CSS/HTML >

canvas.toDataURL image/png 報(bào)錯(cuò)處理方法推薦

來源:本站原創(chuàng)|時(shí)間:2020-01-10|欄目:CSS/HTML|點(diǎn)擊:

問題背景:

遇到一個(gè)需求,要對播放的視頻進(jìn)行截圖,視頻使用video標(biāo)簽來播放,然后點(diǎn)擊視頻播放區(qū)域時(shí)截取實(shí)時(shí)的幀圖片。

代碼很簡單如下:

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var video = document.getElementById('video');   
  2.   
  3. var canvas = document.getElementById('canvas');   
  4.   
  5. var ctx = canvas.getContext('2d');   
  6.   
  7. var img = document.getElementById('img');   
  8.   
  9. function snapshot() {   
  10.    ctx.drawImage(video,0,0);   
  11.    img.src =  canvas.toDataURL('image/png');   
  12. }   
  13.   
  14. video.addEventListener('click', snapshot, false);   

問題提示:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

經(jīng)過查閱和分析,發(fā)現(xiàn)這個(gè)其實(shí)是由于視頻文件所在的域和圖片和頁面所在域不同,出現(xiàn)跨域傳輸?shù)膯栴}。

解決方案:

將視頻文件放到頁面所在域下。

原文地址:http://blog.csdn.net/luochao_tj/article/details/44942125

上一篇:HTML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解

欄    目:CSS/HTML

下一篇:關(guān)于html水平垂直居中的問題小結(jié)

本文標(biāo)題:canvas.toDataURL image/png 報(bào)錯(cuò)處理方法推薦

本文地址:http://www.jygsgssxh.com/a1/CSS_HTML/9654.html

您可能感興趣的文章

網(wǎng)頁制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語言數(shù)據(jù)庫服務(wù)器

如果侵犯了您的權(quán)利,請與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有