canvas.toDataURL image/png 报错处理方法推荐

高洛峰

Lepaskan： 2017-02-22 11:20:24

asal

1819 orang telah melayarinya

问题背景：

遇到一个需求，要对播放的视频进行截图，视频使用video标签来播放，然后点击视频播放区域时截取实时的帧图片。

代码很简单如下：

var video = document.getElementById(&#39;video&#39;);   
  
var canvas = document.getElementById(&#39;canvas&#39;);   
  
var ctx = canvas.getContext(&#39;2d&#39;);   
  
var img = document.getElementById(&#39;img&#39;);   
  
function snapshot() {   
   ctx.drawImage(video,0,0);   
   img.src =  canvas.toDataURL(&#39;image/png&#39;);   
}   
  
video.addEventListener(&#39;click&#39;, snapshot, false);

Salin selepas log masuk

问题提示：

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

经过查阅和分析，发现这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。

解决方案：

将视频文件放到页面所在域下。

更多canvas.toDataURL image/png 报错处理方法推荐相关文章请关注PHP中文网！

Label berkaitan：

canvas.toDataURL PNG

sumber：php.cn

Artikel sebelumnya：html的footer置于页面最底部的简单实现方法 Artikel seterusnya：点击按钮文字变成input框,点击保存变成文字的实现代码

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang