jQuery webcam plugin调用摄像头

栏目: jQuery · 发布时间: 8年前

内容简介：jQuery webcam plugin调用摄像头

原来做项目遇到了调用摄像头功能，php小白遇到这情况立刻就去网上搜索，最后用的

https://www.helloweba.com/view-blog-178.html，太烂了，作者也没说如何去使用，如果用的是框架开发更是很麻烦

今天再次发现一款比较灵活的插件jQuery webcam plugin，资源链接： http://www.xarg.org/project/jquery-webcam-plugin/【demo】

使用方法

部分参考： http://www.cnblogs.com/loyung/p/4661886.html

width: 320, height: 240,//这两个参数考虑到显示效果320*240为标准的显示模式，不可更改（插件硬伤）。如果要修改大小其实也是可以的，修改jscam.swf源文件
mode：// 存储方式可以按以下三种方式callback | save | stream
swffile：//可以选择解压后jscam_canvas_only.swf或jscam.swf，jscam_canvas_only加快了每次调用设备的效率，因为他只有jscam.swf的1/3
onTick: function(remain) {}//定时触发，定时拍照
onSave：//关键地方，设置提交数据处理后台做图像参数设置
onCapture：//点击拍照保存
onLoad：//插件加载事件，通常这里罗列设备列表

jQuery("#webcam").webcam({

	width: 320,
	height: 240,
	mode: "callback",
	swffile: "/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller

	onTick: function(remain) {

		if (0 == remain) {
			jQuery("#status").text("Cheese!");
		} else {
			jQuery("#status").text(remain + " seconds remaining...");
		}
	},

	onSave: function(data) {

		var col = data.split(";");
    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
	},

	onCapture: function () {
		webcam.save();

 	  // Show a flash for example
	},

	debug: function (type, string) {
		// Write debug information to console.log() or a div, ...
	},

	onLoad: function () {
    // Page load
		var cams = webcam.getCameraList();
		for(var i in cams) {
			jQuery("#cams").append("<li>" + cams[i] + "</li>");
		}
	}
});

上面的js代码再定义一个

完整demo

下面代码中的注释仅是个人理解，并非作者原有，仅供参考

html+js

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery-webcam-master</title>
    <link href="cs.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.webcam.min.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) {
//设置画布为2d，未来可能支持3d
                ctx = canvas.getContext("2d");
//截图320*240，即整个画布作为有效区(cutx?)
                image = ctx.getImageData(0, 0, 320, 240);

                saveCB = function(data) {
//把data切割为数组
                    var col = data.split(";");
                    var img = image;
//绘制图像(这里不是很理解算法)
//参数data  只是每行的数据  ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
                    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;
                    }
//当绘制320*240像素的图片时发给后端php
                    if (pos >= 4 * 320 * 240) {
//把图像放到画布上,输出为png格式
                        ctx.putImageData(img, 0, 0);
                        $.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")});
                        pos = 0;
                    }
                };

            } else {
                saveCB = function(data) {
//把数据一点点的放入image[]
                    image.push(data);
                    pos+= 4 * 320;
                    if (pos >= 4 * 320 * 240) {
                        $.post("upload.php", {type: "pixel", image: image.join('|')});
                        pos = 0;
                    }
                };
            }
            $("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: "jscam_canvas_only.swf",

                onSave: saveCB,

                onCapture: function () {
                    webcam.save();
                },

                debug: function (type, string) {
                    console.log(type + ": " + string);
                }
            });
//            /**
//             * 获取canvas画布的内容 getImageData
//             * 内容放回到canvas画布 putImageData
//             * 获取ImgData的每一个像素 ImgData.data
//             * getImageData(起始点的横坐标, 起始点的纵坐标, 获取的宽度, 获取的高度)
//             * putImageData(绘制点的横坐标, 绘制点点纵坐标, imgData的起始点横坐标, imgData的起始点纵坐标, 宽度, 高度)
//             */
        });
    </script>
</head>
<body>
<div id="webcam"></div>
<input type="button" onclick="webcam.capture();" value="点击触发" >
</body>

</html>

php后台处理

后台是涉及的是 php 绘图技术，在php.ini中开启extension=php_gd2.dll，如果是框架开发，在上面的js中$.post异步给框架【TP】中控制器的某个方法

<?php
//$str = file_get_contents("php://input");
//file_put_contents("upload.jpg",  pack("H*", $str));
//var_dump($_POST['image']);

if ($_POST['type'] == "pixel") {
    // input is in format 1,2,3...|1,2,3...|...
    $im = imagecreatetruecolor(320, 240);

    foreach (explode("|", $_POST['image']) as $y => $csv) {
        foreach (explode(";", $csv) as $x => $color) {
            imagesetpixel($im, $x, $y, $color);
        }
    }
} else {
    // input is in format: data:image/png;base64,...
    $im = imagecreatefrompng($_POST['image']);
}
imagepng($im,"circle".time().".png");//保存，指定路径
imagedestroy($im);
// do something with $im

源码编译

该插件有个缺点就是像素大小不能调整，如果要调整像素大小需要编译 src目录下 的源码，我没有亲自测试，提供编译成功的例子 http://www.cnblogs.com/iasp/p/6540123.html【jQuery Webcam Plugin jscam.swf文件反编译工具使用说明】

以上所述就是小编给大家介绍的《jQuery webcam plugin调用摄像头》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Build Your Own Web Site the Right Way Using HTML & CSS

Ian Lloyd / SitePoint / 2006-05-02 / USD 29.95

Build Your Own Website The Right Way Using HTML & CSS teaches web development from scratch, without assuming any previous knowledge of HTML, CSS or web development techniques. This book introduces you......一起来看看《Build Your Own Web Site the Right Way Using HTML & CSS》这本书的介绍吧!

码农工具