Проблема, с которой я сталкиваюсь, заключается в следующем:
Я использую видео и тег холста и захвата кадра из тега видео и поместите его в тег canvas , но когда я создаю ссылку на canvas в javascript, чтобы я мог вернуть dataURL, он разорвется .Обратите внимание, что видео является локальным , устанавливает ли флаг холста 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 видеоизображения на холсте и поместить его в текстовое поле, но оно не работает)
<% @ Page Language = "VB" AutoEventWireup = "false" CodeFile ="Video.aspx.vb" Inherits = "Video"%>
<!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>