HTML5+Java(Spring下) 拍照上传图片
使用支持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下) 拍照上传图片的更多相关文章
- 利用html5调用本地摄像头拍照上传图片[转]
利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...
- 利用html5调用本地摄像头拍照上传图片
这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...
- Spring Boot 获取 java resources 下文件
Spring Boot 获取 java resources 下文件 Spring Boot 获取 resources 目录下的目录(例:获取 resources 目录下的 template 目录): ...
- 自建一个Java Spring MVC项目
用IDEA Intellij,本来创建的是SpringMVC项目,但是下载的时候,太慢了.所以还是用的Maven项目. 选择Maven 项目->Archetype->Web applica ...
- 从零开始学 Java - Spring 集成 Memcached 缓存配置(二)
Memcached 客户端选择 上一篇文章 从零开始学 Java - Spring 集成 Memcached 缓存配置(一)中我们讲到这篇要谈客户端的选择,在 Java 中一般常用的有三个: Memc ...
- 从零开始学 Java - Spring 集成 ActiveMQ 配置(一)
你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...
- 从零开始学 Java - Spring 集成 Memcached 缓存配置(一)
硬盘和内存的作用是什么 硬盘的作用毫无疑问我们大家都清楚,不就是用来存储数据文件的么?如照片.视频.各种文档或等等,肯定也有你喜欢的某位岛国老师的动作片,这个时候无论我们电脑是否关机重启它们永远在那里 ...
- 从零开始学 Java - Spring 集成 ActiveMQ 配置(二)
从上一篇开始说起 上一篇从零开始学 Java - Spring 集成 ActiveMQ 配置(一)文章中讲了我关于消息队列的思考过程,现在这一篇会讲到 ActivMQ 与 Spring 框架的整合配置 ...
- 从零开始学 Java - Spring 支持 CORS 请求踩的坑
谁没掉进过几个大坑 记得好久之前,总能时不时在某个地方看到一些标语,往往都是上面一个伟人的头像,然后不管是不是他说的话,下面总是有看起来很政治正确且没卵用的屁话,我活到目前为止,最令我笑的肚子痛得是下 ...
随机推荐
- (二)zookeeper安装
再安装zookeeper之前,我们看下zookeeper简介 https://baike.baidu.com/item/zookeeper/4836397?fr=aladdin 再Dubbo中 官方推 ...
- 【论文阅读】HydraPlus-Net: Attentive Deep Features for Pedestrian Analysis
转载请注明出处:https://www.cnblogs.com/White-xzx/ 原文地址:https://arxiv.org/abs/1709.09930 Github: https://git ...
- Visual Studio 2013 发布正式版及使用感受
(注意:文末我添加了一个小节,用来更新最新的一些使用感受.) 昨天晚上,微软在正式发布Windows 8.1的同时,也同时发布了Visual Studio 2013产品系列的正式版. 版本情况 Vis ...
- 【LOJ】#2569. 「APIO2016」最大差分
题解 第一个子任务直接询问最大最小,每次可以问出来两个,再最大最小-1再问两个,最多问\(\frac{N + 1}{2}\)次就还原出了序列 第二个子任务由于差分肯定会大于等于\(\lceil \fr ...
- echarts地图定时切换散点及多图表级联联动
本文目录 1. 摘要 2.引入ECharts以及地图相关json 3. 界面布局 4. js实现图形布局 5.定时循环jquery实现 6. 总结 1. 摘要 最近做项目遇到个统计相关需求,一个页面 ...
- hive的实现机制
hive利用hdfs存储数据文件,利用MapReduce查询数据. 数据库:支持在线联机业务(实时.事务控制) 数据仓库:存储历史数据,面向主题的.主要用于离线数据分析的.
- Python学习笔记之爬取网页保存到本地文件
爬虫的操作步骤: 爬虫三步走 爬虫第一步:使用requests获得数据: (request库需要提前安装,通过pip方式,参考之前的博文) 1.导入requests 2.使用requests.get ...
- 基于jquery的水平滚轴组件,多参数可设置。
闲来无事,继续封装.此次封装的为水平滚轴组件,可选择滚动的距离大小.闲话不多说,直接上图. 参数说明: vis:4 中间区域可显示的 li 个数 scroll:4 ...
- 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 前一篇文章 ...
- FTP传输一定要注意使用二进制模式
一个问题困扰了我一下午,刚刚才解决.我要上传一个PHP程序,其中用了sqlite数据库,没想到上传完以后无论如何也不能用,总是数据库查询失败.我登录上SSH,把几乎每个php都调试了一遍,还是没法解决 ...