903fa9788312162a954888a2e31e8d5ea7aa6744.svn-base
3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>shishi </title>
<meta name="decorator" content="default"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="${ctxStatic}/jquery/jquery.webcam.min.js" type="text/javascript"></script>
<style type="text/css">
div{
text-align: center;
vertical-align: middle;
}
</style>
<script type="text/javascript">
$(function () {
var ywh = "${ywh}";
$.ajaxSetup({
async:false
});
var pos = 0, ctx = null, saveCB,w = 320,h= 240, image = [];
var canvas = document.createElement("canvas");//创建画布指定宽度和高度
canvas.setAttribute('width', 600);
canvas.setAttribute('height', 450);
//如果画布成功创建
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
saveCB = function(data) {
var col = data.split(";");//把data切割为数组
var img = image;
//绘制图像(这里不是很理解算法)
//参数 data 只是每行的数据 ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
for(var i = 0; i < w; 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;
}
//当绘制320*240像素的图片时发给后端
if (pos == 4 * w * h) {
//把图像放到画布上,输出为png格式
ctx.putImageData(img, 0, 0);
$.post("${ctx}/reg/bus/uploadExamPic/uploadPic", {val: "data",w:w,h:h,ywh:ywh,image: canvas.toDataURL("image/png")},function(){
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);//把数据一点点的放入image[]
pos+= 4 * w;
if (pos == 4 * w * h) {
$.ajax({
type: 'POST',
url: "${ctx}/reg/bus/uploadExamPic/uploadPic",
data: {val: "pixel",w:w,h:h,ywh:ywh,image:image.join('|')},
success:function(){
pos = 0, ctx = null, saveCB,w = 320,h= 240, image = [];
}
});
pos = 0;
}
};
}
//拍照
$("#webcam").webcam({
width: 280,
height: 240,
mode: "callback",
swffile: "${ctxStatic}/jquery/jscam_canvas_only.swf",//自己的路径
onSave: saveCB,
onCapture: function () {
$("#webcam").css("display", "block");
$("#webcam").fadeOut("fast", function () {
$("#webcam").css("opacity", 1);
});
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
})
function savepho(){
webcam.capture();
losewin();
}
function losewin(){
window.opener.location.reload();
window.close();
}
</script>
</head>
<body>
<label class="layui-form-label" style="width:60px;"><br/></label>
<div id="picView" style="width:296px;height:240px;margin-left:73px;">
<div id="webcam" style="width:286px;height:240px"></div>
</div >
<div>
<br/><br/>
<input type="button" id="button" value="拍照" onclick="savepho()"/>
</div>
<div style="display: none;">
</div>
</body>
</html>