使用支持html5的浏览器，找个有摄像头，再建一个文件接收base64字串的图片然后保存就哦了

<html>

<head runat="ReYo-Server">

    <title></title>

    <script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

    <script language="javascript" type="text/javascript">

        window.addEventListener('DOMContentLoaded', function () {

            'use strict';

            var video = document.querySelector('video');

            function successCallback(stream) {

                // Set the source of the video element with the stream from the camera

                if (video.mozSrcObject !== undefined) {

                    video.mozSrcObject = stream;

                } else {

                    video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;

                }

                video.play();

            }

            function errorCallback(error) {

                console.error('An error occurred: [CODE ' + error.code + ']');

                // Display a friendly "sorry" message to the user

            }

            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

            // Call the getUserMedia method with our callback functions

            if (navigator.getUserMedia) {

                navigator.getUserMedia({ video: true }, successCallback, errorCallback);

            } else {

                console.log('Native web camera streaming (getUserMedia) not supported in this browser.');

                // Display a friendly "sorry" message to the user

            }

        }, false);

    </script>

</head>

<body>

    <video id="myVideo" autoplay="autoplay" Width="400px" Height="300px"></video>

    <br />

    <input type="button" value="拍照" /><br />

    拍照結果：

    <div id="result">

    </div>

    <script type="text/javascript">

        $(document).ready(init);

        function init() {

            //Google Chrome要用webkitGetUserMedia函式

            //navigator.webkitGetUserMedia("video", success);  //显示影像 

            //定义button

            $("input[type='button']").click(function () {

                shoot(); //执行拍照

            });

        }

        function success(stream) {

            $("#myVideo").attr("src", window.webkitURL.createObjectURL(stream));

        }

        //執行拍照

        function shoot() {

            var video = $("#myVideo")[0];

            var canvas = capture(video);

            $("#result").empty();

            $("#result").append(canvas); //呈現图像(拍照結果) 

            var imgData = canvas.toDataURL("image/jpg");

            var base64String = imgData.substr(22); //取得base64字串 

            //上傳，儲存图片

            $.ajax({

                url: "uploadImagerReYo",

                type: "post",

                //base64String

                data: { urls: imgData  },

                async: true,

                success: function (htmlVal) {

                    alert("另存图片成功！");

                }, error: function (e) {

                    alert(e.responseText); //alert错误信息

                }

            });

        }

        //从video元素抓取图像到canvas

        function capture(video) {

            var canvas = document.createElement('canvas'); //建立canvas js DOM元素

            canvas.width = video.videoWidth;

            canvas.height = video.videoHeight;

            var ctx = canvas.getContext('2d');

            ctx.drawImage(video, 0, 0);

            return canvas;

        } 

    </script>

</body>

</html>

界面：

HTML5+Java(Spring下) 拍照上传图片的更多相关文章

  1. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  2. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  3. Spring Boot 获取 java resources 下文件

    Spring Boot 获取 java resources 下文件 Spring Boot 获取 resources 目录下的目录(例:获取 resources 目录下的 template 目录): ...

  4. 自建一个Java Spring MVC项目

    用IDEA Intellij,本来创建的是SpringMVC项目,但是下载的时候,太慢了.所以还是用的Maven项目. 选择Maven 项目->Archetype->Web applica ...

  5. 从零开始学 Java - Spring 集成 Memcached 缓存配置（二）

    Memcached 客户端选择 上一篇文章 从零开始学 Java - Spring 集成 Memcached 缓存配置(一)中我们讲到这篇要谈客户端的选择,在 Java 中一般常用的有三个: Memc ...

  6. 从零开始学 Java - Spring 集成 ActiveMQ 配置（一）

    你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...

  7. 从零开始学 Java - Spring 集成 Memcached 缓存配置（一）

    硬盘和内存的作用是什么 硬盘的作用毫无疑问我们大家都清楚,不就是用来存储数据文件的么?如照片.视频.各种文档或等等,肯定也有你喜欢的某位岛国老师的动作片,这个时候无论我们电脑是否关机重启它们永远在那里 ...

  8. 从零开始学 Java - Spring 集成 ActiveMQ 配置（二）

    从上一篇开始说起 上一篇从零开始学 Java - Spring 集成 ActiveMQ 配置(一)文章中讲了我关于消息队列的思考过程,现在这一篇会讲到 ActivMQ 与 Spring 框架的整合配置 ...

  9. 从零开始学 Java - Spring 支持 CORS 请求踩的坑

    谁没掉进过几个大坑 记得好久之前,总能时不时在某个地方看到一些标语,往往都是上面一个伟人的头像,然后不管是不是他说的话,下面总是有看起来很政治正确且没卵用的屁话,我活到目前为止,最令我笑的肚子痛得是下 ...

随机推荐

  1. 【linux】crontab无效解决办法

    参考来源:http://www.tennfy.com/3088.html 问题: 我在crontab中添加了一条定时任务 * * * sh test.sh 出乎意料的是,该定时任务并没有执行.可是我直 ...

  2. CentOS 7 通过 yum 安装 nodejs 和 npm

    curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - yum install -y nodejs

  3. word2vec 中的数学原理三 背景知识 语言模型

    主要参考:    word2vec 中的数学原理详解                 自己动手写 word2vec

  4. 【Java】 归并排序的非递归实现

    归并排序可以采用递归方法(见:归并排序),但递归方法会消耗深度位O(longn)的栈空间,使用归并排序时,应该尽量使用非递归方法.本文实现了java版的非递归归并排序. 更多:数据结构与算法合集 思路 ...

  5. org.apache.maven.archiver.MavenArchiver.getManifest错误

    eclipse导入新的maven项目时,pom.xml第一行报错: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.mav ...

  6. 002.iSCSI服务端配置

    一 iSCSI target的磁盘种类 大型文件 单一分区(partition) 磁盘 数组 RAID LVM 二 iSCSI创建步骤 建立用于共享的磁盘设备(分区/磁盘/文件) 创建后备磁盘 创建相 ...

  7. 使用Django简单编写一个XSS平台

    1) 简要描述        原理十分简单2333,代码呆萌,大牛勿喷 >_< 2) 基础知识 XSS攻击基本原理和利用方法 Django框架的使用 3) Let's start 0x01 ...

  8. MySQL数据库之触发器

    1 引言 本文是对MySQL中触发器的总结,从触发器概念出发,结合实例对创建触发器.使用触发器.删除触发器进行介绍. 2 触发器简介 MySQL触发器和存储过程一样,都是嵌入到MySQL的一段程序.触 ...

  9. iOS 11开发教程（十七）iOS11应用视图之使用按钮接收用户输入

    iOS 11开发教程(十七)iOS11应用视图之使用按钮接收用户输入 在iOS中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. ...

  10. 用yum安装JDK

    用yum安装JDK 1.查看yum库中都有哪些jdk版本(暂时只发现了openjdk) [root@localhost ~]# yum search java|grep jdkldapjdk-java ...