jQuery webcam plugin调用摄像头

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

内容简介: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调用摄像头》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

SQL完全手册

SQL完全手册

格罗夫 / 电子工业 / 2006-6 / 68.00元

本书为专业和非专业用户、程序员、数据处理方面的专业人士和希望理解sQL在今天计算机产业中的影响的经理们提供了关于SQL语言的全面深入的介绍。本书为理解和使用SQL提供了一个概念上的框架,描述了SQL的历史和SQL的标准,解释了SQL在各种计算机产业领域(如企业级数据处理、数据仓库、Web站点体系结构)中的作用。这一版包含一些新的章节,专门讲述SQL在应用服务器体系结构中的作用、sQL与xML的集成......一起来看看 《SQL完全手册》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具