Html 以PNG或JPEG格式向服务器发送画布内容_Html_Jsp

Html 以PNG或JPEG格式向服务器发送画布内容

html jsp

Html 以PNG或JPEG格式向服务器发送画布内容,html,jsp,Html,Jsp,我有这段代码，在执行嵌入flash页面和点击它捕获flash位图到画布上。在这里，upto可以很好地工作，但问题是如何将捕获的数据发送到画布到服务器的PNG或JPEG图像格式。我使用Jquery网络摄像头插件和Jquery.js加载flash <html> <body> <br><br> <form name="f" id="f" runat="server"><table><tr><!--<td&

我有这段代码，在执行嵌入flash页面和点击它捕获flash位图到画布上。在这里，upto可以很好地工作，但问题是如何将捕获的数据发送到画布到服务器的PNG或JPEG图像格式。我使用Jquery网络摄像头插件和Jquery.js加载flash

<html>
<body>
<br><br>
<form name="f" id="f" runat="server"><table><tr><!--<td><div id="eflash">
</div></td>-->
<td>
<div id="webcam">
</div></td><td><canvas style="border:2px solid red"  id="canvas" width="320" height="240">
 </canvas>

</td></tr></table>
<br><p><a href="javascript:webcam.capture();void(0);">CLICK</a>**|**<input type="button" id="sendBtn" value="Send" /></p>
</form>
</body></html>

<script type="text/javascript" src="./jquery/jquery.js"></script>

<!--<script type="text/javascript" src="./jquery/jquery.flash.js"></script>-->
<script type="text/javascript" src="./jquery/jquery.webcam.js"></script>

<!--<script>
$(document).ready(
    function() {
        $('#eflash').flash({src: 'jscam.swf',     width: 220,     height: 140     }); 
    }
);
</script>-->

<script type="text/javascript">
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf",

onTick: function(remain) {
if (0 == remain)
{jQuery("#status").text("Sorria!");
}
else { 
jQuery("#status").text(remain + " segundo(s) restante(s)...");
}
},

onSave: function(data)
{ 
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++)
{ 
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4; 
}

if (pos >= 4 * 320 * 240)
{ 
ctx.putImageData(img, 0, 0);
var canvas = document.getElementById("canvas");
var save_image = canvas.toDataURL("image/jpeg");
save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, "");
$('input[name=save_image]').val(save_image);
pos = 0;
} 
},

onCapture: function ()
{
jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut(100, function () {jQuery("#flash").css("opacity", 1);}); 
jQuery("#canvas").show();
webcam.save();
},

onLoad: function ()
{ var cams = webcam.getCameraList();
for(var i in cams) {jQuery("#cams").append("<li>" + cams[i] + "</li>");} 
jQuery("#canvas").hide();}
});    

function getPageSize()
{ 
var xScroll, yScroll; 
if (window.innerHeight && window.scrollMaxY)
{ 
xScroll = window.innerWidth + window.scrollMaxX; 
yScroll = window.innerHeight + window.scrollMaxY;
} 
else 
if (document.body.scrollHeight > document.body.offsetHeight)
{ // all but Explorer Mac
xScroll = document.body.scrollWidth; 
yScroll = document.body.scrollHeight; 
} 
else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight; 
if (self.innerHeight)
{ // all except Explorer 
if(document.documentElement.clientWidth)
{ 
windowWidth = document.documentElement.clientWidth;
}
else 
{ 
windowWidth = self.innerWidth;
} 
windowHeight = self.innerHeight;
}
else 
if (document.documentElement && document.documentElement.clientHeight)
{ // Explorer 6 Strict Mode 
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} 
else 
if (document.body)
{ // other Explorers 
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight)
{
pageHeight = windowHeight;
}
else
{
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth)
{
pageWidth = xScroll;
} 
else
{
pageWidth = windowWidth;
}
return [pageWidth, pageHeight];    }

window.addEventListener("load", function()
{
jQuery("body").append("<div id=\"flash\"></div>");
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 320, 240);
}
image = ctx.getImageData(0, 0, 320, 240);

}
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false); 
window.addEventListener("resize", function() {
var pageSize = getPageSize(); 
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);


</script>






**|**
var-pos=0；
var-ctx=null；
var-cam=null；
var-image=null；
jQuery（“网络摄像头”）。网络摄像头({
宽度：320，
身高：240，
模式：“回调”，
swffile:“jscam_canvas_only.swf”，
onTick：功能（保留）{
如果（0==保持）
{jQuery（“#status”）.text（“Sorria！”）；
}
否则{
jQuery（“#status”）.text（保留+“segundo（s）restante（s）…”）；
}
},
onSave：函数（数据）
{ 
var col=data.split（“；”）；
var img=图像；
对于（变量i=0；i<320；i++）
{ 
var tmp=parseInt（col[i]）；
模拟数据[pos+0]=（tmp>>16）和0xff；
模拟数据[pos+1]=（tmp>>8）&0xff；
模拟数据[pos+2]=tmp&0xff；
模拟数据[pos+3]=0xff；
pos+=4；
}
如果（位置>=4*320*240）
{ 
ctx.putImageData（img，0,0）；
var canvas=document.getElementById（“canvas”）；
var save_image=canvas.toDataURL（“image/jpeg”）；
保存图像=保存图像。替换（/^数据：图像\/（png | jpeg）；base64，/，“”）；
$（'input[name=save_image]'）.val（save_image）；
pos=0；
} 
},
onCapture:function（）
{
jQuery（“flash”）.css（“显示”、“块”）；
fadeOut（100，函数（）{jQuery（#flash”）.css（“不透明”，1）}）；
jQuery（“#canvas”）.show（）；
webcam.save（）；
},
onLoad:function（）
{var cams=webcam.getCameraList（）；
对于（cams中的变量i）{jQuery（#cams”）。追加（“”+cams[i]+””）；}
jQuery（“#canvas”）.hide（）；}
});    
函数getPageSize（）
{ 
var xScroll，yScroll；
if（window.innerHeight&&window.scrollMaxY）
{ 
xScroll=window.innerWidth+window.scrollMaxX；
yScroll=window.innerHeight+window.scrollMaxY；
} 
其他的
if（document.body.scrollHeight>document.body.offsetHeight）
{//除Explorer Mac外，其他所有
xScroll=document.body.scrollWidth；
yScroll=document.body.scrollHeight；
} 
否则{//explorerMac…也可以在Explorer6、Mozilla和Safari中使用
xScroll=document.body.offsetWidth；
yScroll=document.body.offsetHeight；
}
var窗口宽度、窗口高度；
if（自内高度）
{//除Explorer之外的所有
if（document.documentElement.clientWidth）
{ 
windowWidth=document.documentElement.clientWidth；
}
其他的
{ 
windowWidth=self.innerWidth；
} 
windowHeight=self.innerHeight；
}
其他的
if（document.documentElement&&document.documentElement.clientHeight）
{//Explorer 6严格模式
windowWidth=document.documentElement.clientWidth；
windowHeight=document.documentElement.clientHeight；
} 
其他的
if（document.body）
{//其他探险家
windowWidth=document.body.clientWidth；
windowHeight=document.body.clientHeight；
}
//对于总高度小于视口高度的小页面
if（yScroll<窗高）
{
页面高度=窗口高度；
}
其他的
{
pageHeight=yScroll；
}
//对于总宽度小于视口宽度的小页面
if（xScroll

这是这个的副本吗？不不是。顺便说一句，我们怎么能做到呢！