HTML5 视频到画布。无法保存图片答案

【问题标题】：HTML5 Video to Canvas. Cant save the imageHTML5 视频到画布。无法保存图片
【发布时间】：2011-06-25 11:57:34
【问题描述】：

我遇到的问题如下：

我使用视频和画布标签并从视频标签中捕获帧并将其放入画布标签，但是当我在 javascript 中创建画布的引用，以便我可以返回 它被炸掉的 dataURL。请注意视频是本地的，这是否将 canvas origin-clean 标志设置为 false，即使它是本地的？我在 Firfox 3.6、IE9 Beta、Safari 5.0.3 中进行了测试，但都失败了。

这是我用来放置视频帧的代码：

var video = document.getElementById(“video”);

var canvasDraw = document.getElementById(‘imageView’);
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext(’2d’);

ctxDraw.clearRect(0, 0, w, h);
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);

以上工作完美。下面是获取dataURL的代码：

function getURIformcanvas() {
var ImageURItoShow = “”;
var canvasFromVideo = document.getElementById(“imageView”);
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext(“2d”); // Get the context for the canvas.

var ImageURItoShow = canvasFromVideo.toDataURL(“image/png”); //<– It fails on this line.
}
var doc = document.getElementById("txtUriShow");
doc.value = ImageURItoShow;

}

总是在线失败：

var ImageURItoShow = canvasFromVideo.toDataURL("image/png");

关于可能是什么问题的任何想法。如果我将普通图像加载到画布中，它可以正常工作，但是一旦我将视频中的图像加载到画布中，该行就会失败。

有什么想法吗？

这里是完整的页面代码，重现错误的步骤如下：

点击“拍摄”按钮。（将从视频中捕获图像，首先要做到这一点非常重要！）

点击“查看 URI”按钮。（这应该是在画布中创建视频图像的toDataURL并将其放置在文本框中，但它不起作用）

<!DOCTYPE HTML>
<html lang="en">
 <head>
   <meta content="" charset="utf-8" />
   <title>Video to Canvas</title>

 </head>
 <body>


 <script type="text/javascript">

</script>
<table>
   <tr>
       <td>
       <p style="height:21px"></p>
           <video id="video" width="400px" height="300px" controls="true">
                <source src="gizmo.mp4">
                <source src="gizmo.ogv">
               <source src="gizmo.webm">
            </video><br/>
            <button onclick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>




       </td>
       <td style="vertical-align:top">

   <button onclick="getURIformcanvas()" style="width: 64px;border: solid
2px #ccc;">View URI</button></p>
   <div id="container" style="border:none">

     <canvas id="imageView" style="position: absolute; left: 0; top: 0;
z-index: 0;border:none" width="400" height="300">
       <p>Unfortunately, your browser is currently unsupported by our web 
       application.  We are sorry for the inconvenience. Please use one of
the 
       supported browsers listed below, or draw the image you want using an

       offline tool.</p>
       <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
         href="http://www.mozilla.com">Firefox</a>, <a 
         href="http://www.apple.com/safari">Safari</a>, and <a 
         href="http://www.konqueror.org">Konqueror</a>.</p>
     </canvas>

       </div>
       </td>
   </tr>
   <tr>
       <td colspan="2">
           <input type="text" id="txtUriShow" name="txtUriShow" value="" />
           <img type="text" id="img1" name="img1" value="" />
       </td>
   </tr>
</table>


   <script>


       function getURIformcanvas() {
           var ImageURItoShow = "";
           var canvasFromVideo = document.getElementById("imageView");
           if (canvasFromVideo.getContext) {
               var ctx = canvasFromVideo.getContext("2d"); // Get the context for the canvas.canvasFromVideo.
               var ImageURItoShow = canvasFromVideo.toDataURL("image/png");

           }
           var doc = document.getElementById("txtUriShow");
           doc.value = ImageURItoShow;


       }

       var videoId = 'video';


       function capture() {
           var video = document.getElementById("video");


           var canvasDraw = document.getElementById('imageView');
           var w = canvasDraw.width;
           var h = canvasDraw.height;
           var ctxDraw = canvasDraw.getContext('2d');

           ctxDraw.clearRect(0, 0, w, h);

           ctxDraw.drawImage(video, 0, 0, w, h);
           ctxDraw.save();



       }




   </script>

 </body>
</html>

【问题讨论】：

标签： html video canvas

【解决方案1】：

这些文件在您的硬盘中是本地的，或者本地是指视频与 html/js 文件位于同一文件夹中？您必须将所有文件放在网络中的某个位置才能进行适当的测试。

【讨论】：

@UVL 是的，这些文件是本地的，与 .aspx .js 等文件在同一个文件夹中，我在本地机器上运行它，还没有在服务器上托管它。我在 Visual Studio 中测试时会不会有影响
我注意到这在“file://”协议中工作时不起作用。但是在本地 IIS 服务器（所以 localhost 或 127.0.0.1）上应该可以工作。（但我没有本地服务器可以尝试 BTW）
+1 Safari 碰巧将 file:// 视为 origin-clean，但 Chrome 和 Firefox 不会。如果您想正确测试它，您需要从http:// 浏览。
更新：这似乎是由于画布的 origin-clean 标志，如果您 绘制到，它会将画布标志标记为 origin-clean = false视频中的画布。我同意他们应该阻止从外部 url 视频中提取的图像中获取像素数据，但他们肯定应该允许您操作从您网站本地的视频中获得的图像（如果有办法这？？？？）。我如何获得 W3C 或大多数浏览器（Firefox、safari、IE9）的主要开发人员，以便我可以向他们推荐这个？ :)
@brad 与他们联系on the WHATWG mailing list