使用处理程序保存网络摄像头 [英] Saving webcam image using handler
问题描述
我正在尝试在asp.net中集成jquery网络摄像头插件。
http://www.xarg.org/project/jquery-webcam-plugin/ [ ^ ]
i希望上面的例子在ie7及以上版本工作
以下是我的代码
< script type =text / javascriptsrc =WebCamScripts / jquery-1.8.3.js>< / script>
< script type =text / javascript src =WebCamScripts / jquery.webcam.js>< / script>
< script type =text / javascript>
$（function（ ）{
var pos = 0，ctx = null，saveCB，image = [];
var canvas = document.createElement（canvas）;
canvas.setAttribute（'width'，320）;
canvas.setAttribute（'height'，240）;
if（canvas.toDataURL）{
ctx = canvas.getContext（2d）;
image = ctx.getImageData（0,0,320,240）;
saveCB = function（data）{
var col = data.split（;）;
var img = image;
for（var i = 0;我< 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）;
$ .post（/ upload.ashx ，{type：data，image：canvas.toDataURL（image / png）}，function（data）{
LoadImage（data）;
} ）;
pos = 0;
}
};
}其他{
saveCB =功能（数据）{
image.push（数据）;
pos + = 4 * 320;
if（pos） > = 4 * 320 * 240）{
$ .post（/ upload.ashx，{type：pixel，image：image.join（'|'）}，function（数据）{
LoadIma ge（数据）;
}）;
pos = 0;
}
};
}
$（＃webcam）。摄像头（{
宽度：320，
身高：240，
模式：保存，
onSave：saveCB，
onCapture：function（）{
webcam.save （）;
}，
debug：function（type，string）{
console.log（type +：+ string） ;
}
}）;
}）;
函数LoadImage（数据）{
document.getElementById（'<％= Image.ClientID％>'）。ImageUrl = data;
}
< / script>
--- Html
< div id =webcam>
< / div> < b r $>
Hi,
I am trying to integrate jquery webcam plugin in asp.net.
http://www.xarg.org/project/jquery-webcam-plugin/[^]
i want the above example to work in ie7 and above
Below is my Code
<script type="text/javascript" src="WebCamScripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="WebCamScripts/jquery.webcam.js"></script>
<script type="text/javascript">
$(function () {
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = 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);
$.post("/upload.ashx", { type: "data", image: canvas.toDataURL("image/png") }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
} else {
saveCB = function (data) {
image.push(data);
pos += 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("/upload.ashx", { type: "pixel", image: image.join('|') }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
});
function LoadImage(data) {
document.getElementById('<%= Image.ClientID %>').ImageUrl = data;
}
</script>
---Html
<div id="webcam">
</div>
< asp：Image ID =Imagerunat =serverHeight =240pxWidth =320px />
<asp:Image ID="Image" runat ="server" Height="240px" Width="320px" />
拍照
--HTml
--Handler.ashx
if（context.Request.Form [type] ==pixel）{
///做东西
}否则{
///做东西
}
Take a picture
--HTml
--Handler.ashx
if (context.Request.Form["type"] == "pixel") {
///Do Stuff
}else{
///Do Stuff
}
推荐答案
（function（）{
var pos = 0，ctx = null，saveCB，image = [] ;
var canvas = document.createElement（canvas）;
canvas.setAttribute（'width'，320）;
canvas。 setAttribute（'height'，240）;
if（canvas.toDataURL）{
ctx = canvas.getContext（2d） ;
image = ctx.getImageData（0,0,320,240）;
saveCB = function（data）{
var col = data.split（;）;
var img = image;
for（var i = 0;我< 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）;
(function () {
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = 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);
.post （/upload.ashx，{type：data，image：canvas.toDataURL（image / png）}，function（data）{
LoadImage（data）;
}）;
pos = 0;
}
};
} else {
saveCB =功能（数据）{
image.push（数据）;
pos + = 4 * 320;
if（pos> = 4 * 320 * 240）{
.post("/upload.ashx", { type: "data", image: canvas.toDataURL("image/png") }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
} else {
saveCB = function (data) {
image.push(data);
pos += 4 * 320;
if (pos >= 4 * 320 * 240) {
.post（/ upload.ashx，{type：pixel，image： image.join（'|'）}，function（data）{
LoadIma ge（数据）;
}）;
pos = 0;
}
};
}
.post("/upload.ashx", { type: "pixel", image: image.join('|') }, function (data) {
LoadImage(data);
});
pos = 0;
}
};
}
这篇关于使用处理程序保存网络摄像头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
