Question

我遇到的问题如下：

我使用视频和画布标记并从视频标记中捕获一个框并将其放入画布标记，但是我在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并将其放在文本框中，但它不起作用）

＆lt;％@ Page Language =“VB”AutoEventWireup =“false”CodeFile =“Video.aspx.vb”Inherits =“Video”％＆gt;

<!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>

Answer 1

这些文件在您的HDD中是本地文件，还是由本地文件表示视频与html / js文件位于同一文件夹中？您必须将所有文件放在Web中的某个位置才能对其进行适当的测试。

HTML5视频到画布。无法保存图像

1 个答案: