Question

我试图通过使用canvas方法从实时视频的屏幕拍摄图像。但是，当我按捕获并按查看URI 按钮时，我只会获得空白图像。我也看过这篇文章：Javascript Canvas Blank Image但没有帮助。

这是我的代码：

<html>
<body>
<iframe id="video" width="20%" height="419" src="http://videoplayer.vodobox.com/vodobox_player.php?vid=http://109.123.70.72:1935/live/ptvsports/samitv.m3u8&img=&play=?" frameborder="0" allowfullscreen></iframe>
            <br/>
            <button onClick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>


<div id="container" style="border:none">

     <canvas id="imageView" style="display:none; left: 0; top: 0; z-index: 0;border:none" width="300" height="200">

     </canvas>

</div>

<div id="imgs" style="border:solid">

</div>

<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 imgs = document.getElementById("imgs");

           imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, 'png'));


       }

       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();


           getURIformcanvas();   


       }
   </script>

 </body>
</html>

输出：

画布：按下按钮后获取空白图像

0 个答案: