标签：维数 ace chrome浏览器 split base 类型 手动 tle 大于
插件网址：https://www.xarg.org/project/jquery-webcam-plugin/
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.webcam.js"></script> </head> <body> <div id="cam" style="position: fixed; z-index: 300; width: 500px; height: 400px; right: 0px; top: 0px; border: solid 2px #000;"> <div id="camBox"> <div id="webcam"> </div> </div> </div> <div> <input type="button" id="cli" value="拍照" /> </div> <canvas id="canvas" style="border:1px solid red"></canvas> </body> <script type="text/javascript"> //var canvas = document.createElement("canvas"); //canvas.setAttribute(‘width‘, 320); //canvas.setAttribute(‘height‘, 240); var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高 canvas.setAttribute(‘width‘, 320);//通过代码设置宽高属性，避免图片无法自适应画布的问题 canvas.setAttribute(‘height‘, 240); var image = new Array(); var ctx = null; var pos = 0; var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应 var h = 240; //getContext("2d") 对象内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 //可理解为 返回一个用于在画布上绘图的环境，并获得画布的绘图方法对象 var ctx = canvas.getContext("2d"); image = ctx.getImageData(0, 0, 320, 240);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置 var img = image;//设置img的属性和值，拍照时重新给data赋值 //解释Canvas 的ImageData对象，width:图片宽度，height:高度，单位都为像素 //data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围是0-255 //rgba(red, green, blue, alpha),前三个红绿蓝，范围0-255整数或0%-100%，alpha透明度，0.0-1.0 $(document).ready(function () { $("#webcam").webcam({ width: 500, height: 400, mode: "callback", swffile: "jscam_canvas_only.swf", onTick: function (remain) { }, onSave: function (data) { //图片处理 var col = data.split(";"); //x轴上的每一个像素的rgba for (var i = 0; i < 320; i++) { var tmp = parseInt(col[i]); img.data[pos + 0] = (tmp >> 16) & 0xff;//red img.data[pos + 1] = (tmp >> 8) & 0xff;//green img.data[pos + 2] = tmp & 0xff;//blue img.data[pos + 3] = 0xff;//Alpha pos += 4; } //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕 if (pos >= 4 * 320 * 240) { ctx.putImageData(img, 0, 0);//将图像显示到画布 $.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")},function(result){console.log(result)});//上传图片到服务器。 image = new Array(); pos = 0; } }, onCapture: function () { //拍照，处理图片 webcam.save(); }, onLoad: function () { var cams = webcam.getCameraList();//获取本机摄像头设备 for (var i in cams) { jQuery("#cams").append("<li>" + cams[i] + "</li>"); } } }); //点击拍照按钮 $("#cli").click(function () { window.webcam.capture(); }) }); </script> </html>
服务器代码（PHP):
<?php $image_type=$_POST[‘type‘]; $image_data=$_POST[‘image‘]; $img = str_replace(‘data:image/png;base64,‘, ‘‘, $image_data); $img = str_replace(‘ ‘, ‘+‘, $img); $data = base64_decode($img); // 图片名称 $file_name = "../uploads/head/".time().".png"; $fp = fopen($file_name, ‘w‘); fwrite($fp, $data); fclose($fp); ?>
注：chrome浏览器需要https://传输协议，IE下暂时不用。
jQuery调用摄像头插件jquery-webcam-plugin拍照
标签：维数 ace chrome浏览器 split base 类型 手动 tle 大于
原文地址：https://www.cnblogs.com/maoliyy/p/11230854.html
