jQuery webcam plugin测试事例

最新推荐文章于 2021-03-10 12:02:24 发布

weixin_34265814

最新推荐文章于 2021-03-10 12:02:24 发布

阅读量232

点赞数

文章标签： php 后端 javascript ViewUI

原文链接：https://my.oschina.net/yjft/blog/1527095

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>拍照功能实现</title>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container text-center">


    <div class="row">
        <div class="col-md-2">
            <div id="webcam"></div>
            <img style="cursor: pointer;" id="paizhao" src="./pz.png" title="点击拍照">
            <div id="status"></div>

        </div>

        <div class="col-md-10" id="picbox" style="clear: both">


        </div>
    </div>


</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.webcam.min.js"></script>


<script type="text/javascript">
    $(function () {


        $("#paizhao").click(function () {
            webcam.capture(3); //拍照，参数3是倒计时
        });


        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")}, function (imgsrc) {
                        //console.log(imgsrc);
                        $("#picbox").append("<img style='float: left;margin: 5px' height='240' width='320' src='" + imgsrc + "' />");

                    });
                    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();
            },

            onTick: function (remain) {

                if (0 == remain) {
                    $("#status").text("拍照成功!");

                } else {
                    $("#status").text(remain + " 秒倒计时...");
                }
            },

            debug: function (type, string) {
                console.log(type + ": " + string);
            }
        });
//            /**
//             * 获取canvas画布的内容 getImageData
//             * 内容放回到canvas画布 putImageData
//             * 获取ImgData的每一个像素 ImgData.data
//             * getImageData(起始点的横坐标, 起始点的纵坐标, 获取的宽度, 获取的高度)
//             * putImageData(绘制点的横坐标, 绘制点点纵坐标, imgData的起始点横坐标, imgData的起始点纵坐标, 宽度, 高度)
//             */
    });
</script>


</body>
</html>

<?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, "./upload/" . "circle" . time() . ".png");//保存
imagedestroy($im);
// do something with $im

//图片地址
$img = "http://ai.91xiaoyu.com/plug/picture"."/upload/" . "circle" . time() . ".png";

echo $img;

参照资料：

https://www.xarg.org/project/jquery-webcam-plugin/

转载于:https://my.oschina.net/yjft/blog/1527095