HTML5 拍照与上传图片

最新推荐文章于 2024-04-30 12:49:07 发布
最新推荐文章于 2024-04-30 12:49:07 发布
阅读量358 收藏
点赞数
分类专栏： ASP.NET
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dh19573681/article/details/38240487
版权 
 
 

  
  <%
  
  //
  
  前端：
  
  Default
  
  .
  
  aspx
  
  %>
 
 

 
 


 
 

 
 

  
  <%@ 
  
  Page 
  
  Language
  
  =
  
  "C#" 
  
  AutoEventWireup
  
  =
  
  "true" 
  
  CodeFile
  
  =
  
  "Default.aspx.cs" 
  
  Inherits
  
  =
  
  "_Default" 
  
  %>
 
 

 
 


 
 

 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 

 
 


 
 

 
 

  
  <html 
  
  xmlns=
  
  "http://www.w3.org/1999/xhtml"
  
  >
 
 

 
 

  
  <head 
  
  runat=
  
  "server"
  
  >
 
 

 
 
    
  
  <title></title>
 
 

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

 
 
    
  
  <script 
  
  type=
  
  "text/javascript"
  
  >
 
 

 
 
        
  
  //
  
  本地视频流
 
 

 
 
        
  
  var 
  
  localMediaStream 
  
  = 
  
  null
  
  ;
 
 

 
 


 
 

 
 
        
  
  $
  
  (
  
  function 
  
  () {
 
 

 
 
            
  
  //
  
  视频显示元素
 
 

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

 
 
            
  
  //
  
  画布
 
 

 
 
            
  
  var 
  
  canvas 
  
  = 
  
  document
  
  .
  
  getElementById
  
  (
  
  'canvas');
 
 

 
 
            
  
  //
  
  获取一个
  
  CanvasRenderingContext2D
  
  对象，类型为
  
  2d
 
 

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

 
 
            
  
  //
  
  开启摄像头
 
 

 
 
            
  
  var 
  
  myGetUserMedia 
  
  = 
  
  navigator
  
  .
  
  getUserMedia 
  
  ||
 
 

 
 
                             
  
  navigator
  
  .
  
  webkitGetUserMedia 
  
  ||
 
 

 
 
                             
  
  navigator
  
  .
  
  mozGetUserMedia 
  
  ||
 
 

 
 
                             
  
  navigator
  
  .
  
  msGetUserMedia
  
  ;
 
 

 
 
            
  
  $
  
  (
  
  "#txtMsg"
  
  ).
  
  val
  
  (
  
  '开启摄像头\r\n\r\n' + $("#txtMsg").val());
 
 

 
 
            
  
  navigator
  
  .
  
  webkitGetUserMedia
  
  (
 
 

 
 
                
  
  { 
  
  video
  
  : 
  
  true 
  
  },
 
 

 
 
                
  
  function 
  
  (
  
  stream
  
  ) 
  
  {
 
 

 
 
                    
  
  $
  
  (
  
  "#txtMsg"
  
  ).
  
  val
  
  (
  
  '摄像头开启完毕\r\n\r\n' + $("#txtMsg").val());
 
 

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

 
 
                    
  
  localMediaStream 
  
  = 
  
  stream
  
  ;
 
 

 
 
                    
  
  //
  
  开始播放
 
 

 
 
                    
  
  setTimeout
  
  (
  
  function 
  
  () {
 
 

 
 
                        
  
  canvas
  
  .
  
  width 
  
  = 
  
  video
  
  .
  
  videoWidth
  
  ;
 
 

 
 
                        
  
  canvas
  
  .
  
  height 
  
  = 
  
  video
  
  .
  
  videoHeight
  
  ;
 
 

 
 
                        
  
  //                        
  
  $
  
  (
  
  "#img"
  
  ).
  
  css
  
  (
  
  "width"
  
  , 
  
  video
  
  .
  
  videoWidth
  
  )
  
  ;
 
 

 
 
                        
  
  //                        
  
  $
  
  (
  
  "#img"
  
  ).
  
  css
  
  (
  
  "height"
  
  , 
  
  video
  
  .
  
  videoHeight
  
  )
  
  ;
 
 

 
 
                    
  
  }, 
  
  100
  
  )
  
  ;
 
 

 
 
                
  
  },
 
 

 
 
                
  
  function 
  
  () {
 
 

 
 
                    
  
  $
  
  (
  
  "#txtMsg"
  
  ).
  
  val
  
  (
  
  '无法开启视频采集设备\r\n\r\n' + $("#txtMsg").val());
 
 

 
 
                
  
  }
 
 

 
 
            
  
  )
  
  ;
 
 

 
 
            
  
  //
  
  拍照
 
 

 
 
            
  
  $
  
  (
  
  "#btnCapture"
  
  ).
  
  click
  
  (
  
  function 
  
  () {
 
 

 
 
                
  
  //
  
  若视频流畅通，则执行以下代码，将视频上的图像绘制到画布并通过
  
  img
  
  显示
 
 

 
 
                
  
  if 
  
  (
  
  localMediaStream
  
  ) 
  
  {
 
 

 
 
                    
  
  //
  
  将
  
  video
  
  作为图像源源，在
  
  canvas
  
  上绘制图像
 
 

 
 
                    
  
  ctx
  
  .
  
  drawImage
  
  (
  
  video
  
  , 
  
  0
  
  , 
  
  0
  
  )
  
  ;
 
 

 
 
                    
  
  //
  
  将绘制的图像显示到
  
  img
  
  标签上
 
 

 
 
                    
  
  $
  
  (
  
  "#img"
  
  ).
  
  attr
  
  (
  
  "src"
  
  , 
  
  canvas
  
  .
  
  toDataURL
  
  (
  
  'image/png'));
 
 

 
 
                
  
  }
 
 

 
 
            
  
  })
  
  ;
 
 

 
 
            
  
  //
  
  上传
 
 

 
 
            
  
  $
  
  (
  
  "#btnUpload"
  
  ).
  
  click
  
  (
  
  function 
  
  () {
 
 

 
 
                
  
  $
  
  (
  
  "#txtMsg"
  
  ).
  
  val
  
  (
  
  '开始上传\r\n\r\n' + $("#txtMsg").val());
 
 

 
 
                
  
  $
  
  .
  
  post
  
  (
  
  "Default.aspx?action=UploadImg"
 
 

 
 
                    
  
  , 
  
  { 
  
  imgDataUrl
  
  : 
  
  $
  
  (
  
  "#img"
  
  ).
  
  attr
  
  (
  
  "src"
  
  ) 
  
  }
 
 

 
 
                    
  
  , 
  
  function 
  
  (
  
  data
  
  ) 
  
  {
 
 

 
 
                        
  
  if 
  
  (
  
  data 
  
  == 
  
  "success"
  
  ) 
  
  {
 
 

 
 
                            
  
  $
  
  (
  
  "#txtMsg"
  
  ).
  
  val
  
  (
  
  '上传完毕\r\n\r\n' + $("#txtMsg").val());
 
 

 
 
                        
  
  }
 
 

 
 
                    
  
  }
 
 

 
 
                
  
  )
  
  ;
 
 

 
 
            
  
  })
  
  ;
 
 

 
 
        
  
  })
  
  ;
 
 

 
 
    
  
  </script>
 
 

 
 

  
  </head>
 
 

 
 

  
  <body>
 
 

 
 
    
  
  <form 
  
  id=
  
  "form1" 
  
  runat=
  
  "server"
  
  >
 
 

 
 
        
 
 

 
 
        
  
  <table>
 
 

 
 
            
  
  <tr>
 
 

 
 
                
  
  <td 
  
  colspan=
  
  "2"
  
  >
 
 

 
 
                    
  
  <input 
  
  id=
  
  "btnCapture" 
  
  type=
  
  "button" 
  
  value=
  
  "拍照" 
  
  />
 
 

 
 
                    
  
  <input 
  
  id=
  
  "btnUpload" 
  
  type=
  
  "button" 
  
  value=
  
  "上传" 
  
  />
 
 

 
 
                
  
  </td>
 
 

 
 
            
  
  </tr>
 
 

 
 
            
  
  <tr>
 
 

 
 
                
  
  <td><video 
  
  id=
  
  "video" 
  
  width=
  
  "350px" 
  
  height=
  
  "300px" 
  
  autoplay
  
  ></video></td>
 
 

 
 
                
  
  <td><img 
  
  id=
  
  "img" 
  
  src=
  
  "" 
  
  style=
  
  "border:1px solid red;width:400px;height:300px" 
  
  /></td>
 
 

 
 
            
  
  </tr>
 
 

 
 
            
  
  <tr>
 
 

 
 
                
  
  <td 
  
  colspan=
  
  "2"
  
  >
 
 

 
 
                    
  
  <textarea 
  
  id=
  
  "txtMsg" 
  
  style=
  
  "width:100%;height:400px"
  
  >
 
 

 
 

  
                          getUserMedia
 
 

 
 

  
                          webkitGetUserMedia
 
 

 
 

  
                          mozGetUserMedia
 
 

 
 

  
                          msGetUserMedia
 
 

 
 
                    
  
  </textarea>
 
 

 
 
                
  
  </td>
 
 

 
 
            
  
  </tr>
 
 

 
 
        
  
  </table>
 
 

 
 
        
  
  <canvas 
  
  id=
  
  "canvas" 
  
  style=
  
  "display:none"
  
  ></canvas>
 
 

 
 
    
  
  </form>
 
 

 
 

  
  </body>
 
 

 
 

  
  </html>
 
 

 
 


 
 

 
 


 
 

 
 


 
 

 
 

  
  <%
  
  //
  
  后台：
  
  Default
  
  .
  
  aspx
  
  .
  
  cs
  
  %>
 
 

 
 

  
  using System;
 
 

 
 

  
  using System.Collections.Generic;
 
 

 
 

  
  using System.Linq;
 
 

 
 

  
  using System.Web;
 
 

 
 

  
  using System.Web.UI;
 
 

 
 

  
  using System.Web.UI.WebControls;
 
 

 
 

  
  using System.IO;
 
 

 
 


 
 

 
 

  
  public partial class _Default : System.Web.UI.Page
 
 

 
 

  
  {
 
 

 
 

  
      protected void Page_Load(object sender, EventArgs e)
 
 

 
 

  
      {
 
 

 
 

  
          if (Request["action"] == "UploadImg")
 
 

 
 

  
          {
 
 

 
 

  
              string imgDataUrl = Request["imgDataUrl"];
 
 

 
 

  
              string imgData = imgDataUrl.Substring(22);
 
 

 
 

  
              File.WriteAllBytes(MapPath("Upload/" + Guid.NewGuid().ToString() + ".png"), Convert.FromBase64String(imgData));
 
 

 
 

  
              Response.Write("success");
 
 

 
 

  
              Response.End();
 
 

 
 

  
          }
 
 

 
 

  
      }
 
 

 
 

  
  }
dh19573681
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html手机上传图片去除拍照,HTML5手机拍照上传
weixin_31188927的博客
06-07 1095
首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机，但是这些版本之下的手机只能调用相册选择οnchange="ImgChange(this)">引入3个插件： //图片上传校验 //照相后自动旋转 这个很有用 //正在上传的遮盖层打开摄像头代码：//拍照function cameraImg() {do...
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
09-28
下面是一个简单的HTML5 Plus上传图片的示例： ```html <!doctype html> <html class="feedback"> <!-- meta tags and stylesheets --> <script src="plus.js"></script> <!-- 引入HTML5 Plus库 --> document....
木其工作室代写程序 [原].NET MVC 实现上传附件
weixin_34023863的博客
07-26 150
淘宝网上专业IT程序代写 原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。 作者：永恒の_☆地址：http://blog.csdn.net/chenghui0317/article/details/9501639 .NET MVC 上传附件 原理和以前原来一样，只不过实现方式略有不...
MVC中简单图片上传
qq_60521457的博客
07-29 1466
1.在项目中创建一个“Images”文件夹 2.在
【知识分享】html+js实现系统拍照上传功能
最新发布
各类程序设计成品、文档、学习资料
04-30 522
html+js实现系统拍照上传功能
【Demo】HTML5 拍照上传
weixin_33744141的博客
06-12 3142
为什么80%的码农都做不了架构师？>>> ...
HTML5 Plus 拍照或者相册选择图片上传
热门推荐
山水子农
07-13 4万+
  HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传，利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文...
基于html5、JS实现的拍照上传图片
01-26
原理：调出摄像头，拍照保存到画布，将图片URi传送到后台
HTML5 拍照上传图片
05-19
在"HTML5拍照上传图片"这个主题中，我们主要关注的是如何利用HTML5的新特性来实现用户通过浏览器拍照并上传图片的功能。 首先，`getUserMedia`是HTML5中的一个关键接口，它允许网站访问用户的摄像头和麦克风设备。...
html5调用本地摄相头拍照上传相片
03-01
通过这个例子，你可以学习到如何结合HTML5、JavaScript以及Fetch API来实现一个基本的在线拍照并上传图片的功能。在实际应用中，你可能还需要考虑性能优化、错误处理以及用户体验等方面的细节。
HTML5实现微信拍摄上传照片功能
08-30
这个功能主要通过 HTML5 Canvas 元素来实现手机拍摄、本地压缩和上传图片。下面我们将详细介绍这个功能的实现过程和解决问题的方法。 首先，需要使用 HTML5 的 File API 来获取用户选择的图片文件，并将其转换为 ...
实现HTML5拍照上传
03-21
在HTML5的支持下，在手机上拍照已经成为可能。如何用手机进行拍照，显示在页面上并上传到服务器。HTML5 提供了对摄像头的可编程访问，用户可以直接获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
前端实现拍照上传demo
07-26
一个pc端实现拍照,并且上传到后台的demo,生成的是base64码需要后台处理
asp手机网站拍照上传代码
07-07
这是一款asp源码，可拍照上传，可选择相册图片上传，可上传多张图片
HTML5+jQuery+Canvas调用手机拍照功能上传图片
10-29
HTML5+Canvas+jQuery调用手机拍照功能，本地压缩上传图片。以上都是测试通过了的。
基于MVC的HTML5+Canvas手机拍照上传
07-03
通过HTML5的video开启手机拍照，拍照时需要手机确认开启摄像权限。然后再通过canvas捕获视频流保存为图片base64字符，最后将图片流传递到服务端进行保存。
利用html5调用本地摄像头拍照上传图片
u598975767的专栏
04-27 1万+
html5概念啥的就不废话了，不知道的 百度， 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件（ActiveX，但是这种只有IE支持）或者是flash来获取（或许你没学过flash那就很坑爹了），在之后微软的silvertlight中也可以获取，但这些都比较麻烦，在html5的世界里，要获取本地摄像头，只要
html5实现拍照上传
07-28
// 在这里添加上传图片的逻辑，可以使用canvas.toDataURL()将图片转换成base64编码的字符串进行上传 // 示例代码中只是将图片显示在页面上 document.body.appendChild(canvas); }; var file = input.files[0]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值