HTML5 实现拍照上传
最近开始研究Html5,感觉功能很强大，下面做个实现拍照上传功能的例子。
<!DOCTYPE html>
<html>
<head>
<title></ title>
</head>
<body>
<script src="@ Url.Content("~/Scripts/jquery-1.4..min.js")" type="text/javascript"></script>
<video id="myVideo" autoplay="autoplay"></video >
<br />
<input type="button" value="拍照" />
<br />
拍照结果：
<div id="result">
</div>
<script type="text/javascript"> $(document).ready(init);
var video_element = document.getElementById('myVideo');
function init() { //Google Chrome要用webkitGetUserMedia函式
navigator.webkitGetUserMedia({ video: true }, success); //显示影像 //定义button点选后要做什么
$( "input[type='button']").click(function () {
shoot(); //执行拍照
});
}
function success(stream) {
video_element.src =stream;
$( "#myVideo").attr("src" , window.webkitURL.createObjectURL(stream));
}
//执行拍照
function shoot() { var video = $("#myVideo" )[];
var canvas = capture(video); $( "#result").empty();
$( "#result").append(canvas); //呈现图像(拍照结果)
var imgData = canvas.toDataURL("image/jpg" );
var base64String = imgData.substr(); //取得base64字符串 //上传，储存图片
$.ajax({
url: '@ Url.Action("ApplyForApp", "Handler", new { Area = "PhotoUpload" }) ',
type: "post",
data: { data: base64String },
async: true,
success: function (htmlVal) {
alert( "另存图片成功！" );
}, error: function (e) {
alert(e.responseText); //alert错误讯息
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, , );
return canvas;
}
</script>
</body>
</html>
public string ApplyForApp(string data, int affairsid)
{
var UserName = HttpContext.User.Identity.Name.Split(',')[];
AffairsDataRepository rep = new AffairsDataRepository();
AffairsDataModel affairsdata = new AffairsDataModel();
//HttpContext context = null;
//context.Response.ContentType = "text/plain";
string base64String = data;//context.Request["data"];
Image img = this.Base64ToImage(base64String);
var name = DateTime.Now.ToString("yyyyMMddhhmmss")+".jpg";
img.Save(@"D:\VS2010\Myproject\Project\最新\ComPublishWeb\ComPublishWeb\PhotoUpload\" + name);//储存图片
affairsdata.Dataname = name;
affairsdata.Url = "D:\\VS2010\\Myproject\\Project\\最新\\ComPublishWeb\\ComPublishWeb\\PhotoUpload\\" + name;
affairsdata.Uploadtime = DateTime.Now.ToString();
affairsdata.Uploadernum = UserName;
affairsdata.AffairsID = affairsid;
rep.SavePhotoUpload(affairsdata);
return "上传成功！";
} //把base64字符串转成Image对象
public Image Base64ToImage(string base64String)
{
// Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
MemoryStream ms = new MemoryStream(imageBytes, ,
imageBytes.Length); // Convert byte[] to Image
ms.Write(imageBytes, , imageBytes.Length);
Image image = Image.FromStream(ms, true);
return image;
}
三.Models:
public void SavePhotoUpload(AffairsDataModel data)
{
AffairsMSLinqDataContext db = new AffairsMSLinqDataContext();
AffairsData affairsdata = new AffairsData();
affairsdata.dataname = data.Dataname;
affairsdata.url = data.Url;
affairsdata.uploadernum = data.Uploadernum;
affairsdata.uploadtime = DateTime.Parse(data.Uploadtime);
affairsdata.affairsID = data.AffairsID;
db.AffairsData.InsertOnSubmit(affairsdata);
db.SubmitChanges();
return;
}
大致的过程就是这样了，如果有什么不懂得，欢迎交流。
HTML5 实现拍照上传的更多相关文章
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 【Demo】HTML5 拍照上传
本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
- HTML5手机端拍照上传
1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...
- webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
- iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案
问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...
- Android4.4 + WebAPI 实现拍照上传
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...
- php实现手机拍照上传头像功能
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...
- Html5实现头像上传和编辑，保存为Base64的图片过程
一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...
- Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
随机推荐
- C#将Excel数据导入数据库（MySQL或Sql Server）
最近一直很忙,很久没写博客了.今天给大家讲解一下如何用C#将Excel数据导入Excel,同时在文章最后附上如何用sqlserver和mysql工具导入数据. 导入过程大致分为两步: 1.将excel ...
- uva10718 - Bit Mask(贪心）
题目:uva10718 - Bit Mask(贪心) 题目大意:给出32位无符号的整数n ,给定边界L和R,要求在这个边界里面找出一个整数,它和N做或运算得到的值最大. 解题思路:要求做或运算得到的值 ...
- Java数据结构与算法(2) - ch03排序(冒泡、插入和选择排序)
排序需要掌握的有冒泡排序,插入排序和选择排序.时间为O(N*N). 冒泡排序: 外层循环从后往前,内存循环从前往后到外层循环,相邻数组项两两比较,将较大的值后移. 插入排序: 从排序过程的中间开始(程 ...
- SQL2005性能分析一些细节功能你是否有用到?
原文:SQL2005性能分析一些细节功能你是否有用到? 我相信很多朋友对现在越来越大的数据量而感到苦恼,可是总要面对现实啊,包括本人在内的数据库菜鸟们在开发B/S程序时,往往只会关心自己的数据是否正确 ...
- Unofficial Microsoft SQL Server Driver for PHP (sqlsrv)非官方的PHP SQL Server 驱动
原文 Unofficial Microsoft SQL Server Driver for PHP (sqlsrv) Here are unofficial modified builds of Mi ...
- Cocos2d-x3.0之路--02（引擎文件夹分析和一些细节）
关于怎么搭建好开发环境的我就不写了,网上非常多. 那么 我们来看看 引擎文件的文件夹 所谓知己知彼 百战不殆嘛 先说一下setup.py 这个文件是有关配置的python文件,比方我们在进行andro ...
- jQuery邮箱验证正则表达式验证邮箱合法
if($.trim(email)==''||$.trim(email)=='邮 箱:'||$.trim(email)==null){ alert('邮箱不能为空!'); return false ...
- Oracle并行查询出错
1.错误描写叙述 ORA-12801: 并行查询服务器P007中发出错误信号 ORA-01722:无效数字 12801.00000 -"error signaled in parallel ...
- 生产环境使用Nginx+uwsgi部署Django
在本地运行django应用相对来说还是挺方便的,使用自带的runserver启动即可.如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等 在网上找到了不错的部署的教 ...
- 新手可以学习cocos2dx 3.0 组态（两）
这主要是关于cocos3.0 组态,鉴于互联网已经有很多这样的文章.所以我简单谈一下: 1.python2.7 因为cocos目新建是用python脚本做的,至于为什么不用python3.x 那么请 ...