将画布图像作为文件流HTML5发送 [英] Send Canvas images as a file stream HTML5
问题描述
我正在开发一个系统，其中在浏览器中访问移动设备相机，并且相机流帧同步发送到另一端。发送的帧在另一边被进一步处理。我已经绘制帧到画布与下面的代码的时间间隔。如何将访问的帧发送到另一侧以进一步处理帧同步发生？绘制在画布上的每个帧将被发送到另一侧，用于在每个图像帧上发生进一步的处理。另一方代码是用本地语言。
I am developing a system where the mobile device camera is accessed in the browser and the camera stream frames are send to the other side synchronously. The sent frames are processed further on the other side .I have drawn the frames to the canvas with a time interval as of the below code. How do i send the accessed frames to the other side for the further processing of frames to happen synchronously? each frame drawn on the canvas is to be sent to the other side for the further process to happen on each image frame. The other side code is in native language.
$<!DOCTYPE html>
<html>
<h1>Simple web camera display demo</h1>
<body>
<video autoplay width="480" height="480" src=""></video>
<canvas width="600" height="480" style="" ></canvas>
<img src="" width="100" height="100" ></img>
<script type="text/javascript">
var video = document.getElementsByTagName('video')[0],
heading = document.getElementsByTagName('h1')[0];
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent =
"An error occurred: [CODE " + error.code + "]";
}
} else {
heading.textContent =
"Native web camera streaming is not supported in this browser!";
}
draw_interval = setInterval(function()
{
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var frames = document.getElementById('frames');
ctx.drawImage(document.querySelector("video"), 0, 0);
}, 33)
</script>
</body>
</html>
推荐答案
我不太确定你是什么意思bye
I'm not quite sure what you mean bye "other side" and "native language".
但是，您可以使用AJAX将画布图像发送到服务器。
But, you can send canvas images to a server using AJAX.
服务器接收作为base64编码图像数据的画布图像。
The server receives the canvas image as base64 encoded image data.
例如，假设：
-
您要将图片发送到php服务器（yourOtherSide.php） - 但当然可以是任何接受ajax帖子的服务器。
You’re sending the image to a php server (yourOtherSide.php) – but of course this could be any server that accepts ajax posts.
您有对包含框架的canvas元素的引用：canvas
You have a reference to the canvas element holding your frame: canvas
您的ajax有效内容包含要发送的帧的ID号ID）和图像数据（imgData）。
Your ajax payload contains an id number of the frame being sent (ID) and the image data (imgData).
（可选）您从服务器收到一些响应 - 即使它只是OK：anyReturnedStuff
(optionally) You are getting some response back from the server—even if it’s just "OK": anyReturnedStuff
然后您的ajax帖子是：
Then your ajax post would be:
$.post("yourOtherSide.php", { ID:yourFrame ID, imgData: canvas.toDataURL(‘image/jpeg’) })
.done( function(anyReturnedStuff){ console.log(anyReturnedStuff); } );
[已编辑为包括服务器端从ajax帖子创建图片]
这些代码示例将接收ajax base64 imageData并创建一个图像供您使用c-image处理库处理。
These code samples will receive the ajax base64 imageData and create an image for you to process with your c-image-processing-library.
如果您使用PHP服务器：
If your're using a PHP server:
$img = imagecreatefromstring(base64_decode($imageData));
// and process $img with your image library here
asp.net：
byte[] byteArray = System.Convert.FromBase64String(imageData);
Image image;
using(MemoryStream s=new MemoryStream(byteArray){
image=Image.FromStream(ms);
// and process image with your image library here
}
这篇关于将画布图像作为文件流HTML5发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
