如何在图像框中获取捕获的图像 [英] how to get captured image in image box
本文介绍了如何在图像框中获取捕获的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是链接
http://www.c-sharpcorner.com/UploadFile/4d9083/capturing-image-from-web-cam-in-Asp-Net/
在这个iam中使用java脚本捕获并在文件夹中提交商店。然后点击提交btn图像显示在图像框上
这里是一个代码：
aspx
here is link
http://www.c-sharpcorner.com/UploadFile/4d9083/capturing-image-from-web-cam-in-Asp-Net/
in this iam using java script capturing and submit for store in folder . then after clicking submit btn image display on image box
here is a code :
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Captureimage.aspx.cs" Inherits="WebCam_Captureimage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Capture Image</title>
<link rel="stylesheet" type="text/css" href="css/Master.css" />
<style type="text/css">
#webcam, #canvas
{
width: 272px;
border: 1px solid #ccc;
background: #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#webcam
{
position: relative;
margin-top: 5px;
margin-bottom: 10px;
}
#webcam > span
{
z-index: 2;
position: absolute;
color: #eee;
font-size: 10px;
bottom: -16px;
left: 152px;
}
#webcam > img
{
z-index: 1;
position: absolute;
border: 0px none;
padding: 0px;
bottom: -40px;
left: 89px;
}
#webcam > div
{
border: 1px solid #ccc;
position: absolute;
right: -90px;
padding: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
}
#webcam a
{
background: #fff;
font-weight: bold;
}
#webcam a > img
{
border: 0px none;
}
#canvas
{
border: 1px solid #ccc;
background: #eee;
}
#flash
{
position: absolute;
top: 0px;
left: 0px;
z-index: 5000;
width: 100%;
height: 500px;
background-color: #c00;
display: none;
}
object
{
display: block; /* HTML5 fix */
position: relative;
z-index: 1000;
}
</style>
<script language="javascript" type="text/javascript">
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<link href="../css/Master.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.webcam.js" type="text/javascript"></script>
</head>
<body>
<div class="PhotoUploadWrapper">
<div class="PhotoUpoloadCoseBtn">
</div>
<div class="PhotoUploadContent">
<div class="PhotoUpoloadHeader">
Select photo
</div>
<div class="PhotoUpoloadLeft">
<div class="PhotoUpoloadRightHeader">
<p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">
Upload Photo
</p>
</div>
<div class="PhotoUpoloadLeftMainCont">
<div class="photo_selected_BG">
<div style="padding: 20px 0px 0px 24px;">
<div id="webcam">
</div>
</div>
</div>
<div style="text-align: center; margin-removed 46px;">
<a href="java<!-- no -->script:webcam.capture();void(0);">
<input type="image" id="capture" /></a>
</div>
</div>
</div>
<div class="PhotoUpoloadRight">
<div class="PhotoUpoloadLeftHeader">
<p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">
Web Camera
</p>
</div>
<div class="photo_selected_BG">
<div style="padding: 26px 0px 0px 25px;">
<canvas id="canvas" width="320" height="240"></canvas>
</div>
</div>
<div style="text-align: center; margin-removed 46px;">
<a href="#" id="filter">
<input type="image" id="Submit" runat="server" src="images/submitBTN.png" /></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
var filter_on = false;
var filter_id = 0;
function changeFilter() {
if (filter_on) {
filter_id = (filter_id + 1) & 7;
}
}
function toggleFilter(obj) {
if (filter_on = !filter_on) {
obj.parentNode.style.borderColor = "#c00";
} else {
obj.parentNode.style.borderColor = "#333";
}
}
jQuery("#webcam").webcam({
//width: 272,
width: 272,
height: 202,
mode: "callback",
swffile: "jscam_canvas_only.swf",
onTick: function (remain) {
if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
},
onSave: function (data) {
var col = data.split(";");
var img = image;
if (false == filter_on) {
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;
}
} else {
var id = filter_id;
var r, g, b;
var r1 = Math.floor(Math.random() * 255);
var r2 = Math.floor(Math.random() * 255);
var r3 = Math.floor(Math.random() * 255);
for (var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
/* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */
if (id == 0) {
r = (tmp >> 16) & 0xff;
g = 0xff;
b = 0xff;
} else if (id == 1) {
r = 0xff;
g = (tmp >> 8) & 0xff;
b = 0xff;
} else if (id == 2) {
r = 0xff;
g = 0xff;
b = tmp & 0xff;
} else if (id == 3) {
r = 0xff ^ ((tmp >> 16) & 0xff);
g = 0xff ^ ((tmp >> 8) & 0xff);
b = 0xff ^ (tmp & 0xff);
} else if (id == 4) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
r = v;
g = v;
b = v;
} else if (id == 5) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
if ((r += 32) < 0) r = 0;
if ((g += 32) < 0) g = 0;
if ((b += 32) < 0) b = 0;
} else if (id == 6) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
if ((r -= 32) < 0) r = 0;
if ((g -= 32) < 0) g = 0;
if ((b -= 32) < 0) b = 0;
} else if (id == 7) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
r = Math.floor(r / 255 * r1);
g = Math.floor(g / 255 * r2);
b = Math.floor(b / 255 * r3);
}
img.data[pos + 0] = r;
img.data[pos + 1] = g;
img.data[pos + 2] = b;
img.data[pos + 3] = 0xff;
pos += 4;
}
}
if (pos >= 0x4B000) {
ctx.putImageData(img, 0, 0);
pos = 0;
var canvas = document.getElementById("canvas");
// $.post("http://192.168.1.199/HaomaTesting/WebCam/UploadImage.aspx", { image: canvas.toDataURL("image/png") });
}
},
onCapture: function () {
webcam.save();
jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut(100, function () {
jQuery("#flash").css("opacity", 1);
});
},
debug: function (type, string) {
jQuery("#status").html(type + ": " + string);
},
onLoad: function () {
var cams = webcam.getCameraList();
for (var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
}
);
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.src = "/static/logo.gif";
img.onload = function () {
ctx.drawImage(img, 129, 89);
}
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);
function UploadPic() {
debugger;
// generate the image data
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL("image/png");
// Sending the image data to Server
$.ajax({
type: 'POST',
url: "baseimg.aspx",
data: { imgBase64: dataURL },
success: function () {
alert("Done, Picture Uploaded.");
image.url = image1;
window.opener.location.reload(true); // reloading Parent page
window.close();
window.opener.setVal(1);
return false;
}
});
}
$(function () {
$(document).keyup(function (e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 117:
navigateUrl($('a[id$=lnk1]'));
break;
case 118:
navigateUrl($('a[id$=lnk2]'));
break;
case 119:
navigateUrl($('a[id$=lnk3]'));
break;
default:
;
}
});
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
}
});
function Submit_onclick() {
window.location = "http://localhost:8096/Employee.aspx";
}
</script>
<div style="removed:absolute; removed 51px; removed 996px;">
<asp:HyperLink ID="lnk1" runat="server"
NavigateUrl="http://localhost:49643/guardiyan/Employee.aspx"
ForeColor="White">Employee
<br />
<asp:HyperLink ID="lnk2" runat="server"
NavigateUrl="http://localhost:49643/guardiyan/Client%20info.aspx"
ForeColor="White">clientinfo
<br />
<asp:HyperLink ID="lnk3" runat="server"
NavigateUrl="http://localhost:49966/guardiyan/attendance.aspx"
ForeColor="White">attendance
</div>
<asp:Image ID="Image1" runat="server"
style="position:absolute; top: 477px; left: 175px; height: 153px; width: 167px;"/>
</body>
</html>
base image .cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
public partial class WebCam_baseimg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//called page form json for creating imgBase64 in image
StreamReader reader = new StreamReader(Request.InputStream);
String Data = Server.UrlDecode(reader.ReadToEnd());
reader.Close();
DateTime nm = DateTime.Now;
string date = nm.ToString("yyyymmddMMss");
//used date for creating Unique image name
Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpeg";
Session["Imagename"] = date + ".jpeg";
// We can use name of image where ever we required that why we are storing in Session
drawimg(Data.Replace("imgBase64=data:image/png;base64,", String.Empty), Session["capturedImageURL"].ToString());
// it is method
// passing base64 string and string filename to Draw Image.
insertImagePath(Session["Imagename"].ToString(), "~/Userimages/" + Session["Imagename"].ToString());
// it is method
//inserting image in to database
}
public void drawimg(string base64, string filename) // Drawing image from Base64 string.
{
using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(base64);
bw.Write(data);
bw.Close();
}
}
}
public void insertImagePath(string imagename, string imagepath) // use for imserting image when it is created.
{
// SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());
//SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);
//cmd.CommandType = CommandType.StoredProcedure;
//cmd.Parameters.AddWithValue("@UserImagename", imagename);
//cmd.Parameters.AddWithValue("@UserImagePath", imagepath);
//cmd.Parameters.AddWithValue("@UserID", 1);
//cmd.Parameters.AddWithValue("@QueryID", 1);
//con.Open();
//cmd.ExecuteNonQuery();
//con.Close();
}
}推荐答案
.post(\"http://192.168.1.199/HaomaTesting/WebCam/UploadImage.aspx\", { image: canvas.toDataURL(\"image/png\") });
}
},
onCapture: function () {
webcam.save();
jQuery(\"#flash\").css(\"display\", \"block\");
jQuery(\"#flash\").fadeOut(100, function () {
jQuery(\"#flash\").css(\"opacity\", 1);
});
},
debug: function (type, string) {
jQuery(\"#status\").html(type + \": \" + string);
},
onLoad: function () {
var cams = webcam.getCameraList();
for (var i in cams) {
jQuery(\"#cams\").append(\"<li>\" + cams[i] + \"</li>\");
}
}
}
);
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\").getConte xt(\"2d\");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.src = \"/static/logo.gif\";
img.onload = function () {
ctx.drawImage(img, 129, 89);
}
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);
function UploadPic() {
debugger;
// generate the image data
var canvas = document.getElementById(\"canvas\");
var dataURL = canvas.toDataURL(\"image/png\");
// Sending the image data to Server
.post("http://192.168.1.199/HaomaTesting/WebCam/UploadImage.aspx", { image: canvas.toDataURL("image/png") }); } }, onCapture: function () { webcam.save(); jQuery("#flash").css("display", "block"); jQuery("#flash").fadeOut(100, function () { jQuery("#flash").css("opacity", 1); }); }, debug: function (type, string) { jQuery("#status").html(type + ": " + string); }, onLoad: function () { var cams = webcam.getCameraList(); for (var i in cams) { jQuery("#cams").append("<li>" + cams[i] + "</li>"); } } } ); 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.src = "/static/logo.gif"; img.onload = function () { ctx.drawImage(img, 129, 89); } 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); function UploadPic() { debugger; // generate the image data var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL("image/png"); // Sending the image data to Server
.ajax({
type: 'POST',
url: \"baseimg.aspx\",
data: { imgBase64: dataURL },
success: function () {
alert(\"Done, Picture Uploaded.\");
image.url = image1;
window.opener.location.reload(true); // reloading Parent page
window.close();
window.opener.setVal(1);
return false;
}
});
}
.ajax({ type: 'POST', url: "baseimg.aspx", data: { imgBase64: dataURL }, success: function () { alert("Done, Picture Uploaded."); image.url = image1; window.opener.location.reload(true); // reloading Parent page window.close(); window.opener.setVal(1); return false; } }); }
(function () {
(function () {
这篇关于如何在图像框中获取捕获的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
