I'm trying to use image captured with webcam and want to show over webpage and want to store that also.Here My code trying to convert captured image into Base64 format but it is failed to convert into Base64.Kindly give me solution how can i convert this into Base64.
My code is:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="/static/webcam/New/jquery-1.7.1.min.js" type="text/javascript"> </script>
<script src="/static/webcam/New/webcam.js" type="text/javascript"></script>
<script type="text/javascript">
function showWebcam(){
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/static/webcam/jscam.swf",
quality: 100,
onCapture: function () {
},
onTick: function () {},
onSave: function () {},
onLoad: function () {},
debug: function(type, string) {
$('#wcStatus').append(type + ": " + string + '<br /><br />');
}
});
}
function capture_image(){
void(0);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
// var img = canvas.toDataURL("image/png");
var img = canvas.toDataURL();
alert(img);
var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
alert(item_image);
document.getElementById('myImg').src=item_image;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="camera"></div>
<div id="camList"></div>
<div id="wcStatus"></div>
<button onclick="showWebcam();">Use Webcam Instead</button>
<button onclick="javascript:capture_image();">Take a picture!</button>
<div id="capture_images"><input id="capture_image" type="hidden" value="" name="capture[image]"></div>
<img id="myImg" src="face.png" border=1>
<p><canvas id="canvas" width="320" height="240"> </canvas>
</p>
</body>
</html>
I'm trying to use image captured with webcam and want to show over webpage and want to store that also.Here My code trying to convert captured image into Base64 format but it is failed to convert into Base64.Kindly give me solution how can i convert this into Base64.
My code is:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="/static/webcam/New/jquery-1.7.1.min.js" type="text/javascript"> </script>
<script src="/static/webcam/New/webcam.js" type="text/javascript"></script>
<script type="text/javascript">
function showWebcam(){
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/static/webcam/jscam.swf",
quality: 100,
onCapture: function () {
},
onTick: function () {},
onSave: function () {},
onLoad: function () {},
debug: function(type, string) {
$('#wcStatus').append(type + ": " + string + '<br /><br />');
}
});
}
function capture_image(){
void(0);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
// var img = canvas.toDataURL("image/png");
var img = canvas.toDataURL();
alert(img);
var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
alert(item_image);
document.getElementById('myImg').src=item_image;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="camera"></div>
<div id="camList"></div>
<div id="wcStatus"></div>
<button onclick="showWebcam();">Use Webcam Instead</button>
<button onclick="javascript:capture_image();">Take a picture!</button>
<div id="capture_images"><input id="capture_image" type="hidden" value="" name="capture[image]"></div>
<img id="myImg" src="face.png" border=1>
<p><canvas id="canvas" width="320" height="240"> </canvas>
</p>
</body>
</html>
0 commentaires:
Enregistrer un commentaire