This is the front desk HTML Code for .

 <div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<button id="snap" style="display:none"> Taking pictures </button>
<canvas style="display:none" id="canvas" width="320" height="320"></canvas>

Here's the main code .(jquery)

// Determine whether the browser supports HTML5 Canvas
window.onload = function () {
try {
// Create a dynamic canvas element , And get him 2Dcontext. If there is an exception, it means that... Is not supported
document.getElementByIdx("support").innerHTML = " Browser support HTML5 CANVAS";
catch (e) {
document.getElementByIdx("support").innerHTML = " Browser does not support HTML5 CANVAS"; } };
// This generation It is mainly to get the video stream of the camera and display it in Video Signing
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementByIdx("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
//navigator.getUserMedia It's written in Opera It seems to be navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;;
}, errBack);
} else if (navigator.webkitGetUserMedia)
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);;
}, errBack);
// This is the Photo button event ,
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
}, false);
// Timer
var interval = setInterval(CatchCode, "300");
// This is Refresh on Graphic
function CatchCode() {
// The actual use can not be written , Test generation , To get the current image, click the Photo button , There are other uses
var canvans = document.getElementByIdx("canvas");
// Get the canvas object of the browser page
// Let's start with data
var imgData = canvans.toDataURL(); // Convert image to base64 data
var base64Data = imgData.substr(22); // Intercept at the front end 22 The string after bit is used as image data
// Start asynchronous
$.post("uploadImgCode.ashx", { "img": base64Data },
function (data, status) {
if (status == "success") {
if (data == "OK") {
alert(" A two-dimensional It has been resolved ");
}else {
// alert(data);
} else {
alert(" Data on Failure ");
}, "text");
The last is the receiving process base64 The encoded image file is ready . public void ProcessRequest (HttpContext context) {
string img;
// Receiving process base64 Ed String after
context.Response.ContentType = "text/plain";
try {
img =context.Request["img"].ToString();// obtain base64 character string
byte[] imgBytes = Convert.FromBase64String(img);// take base64 String to byte array
System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);// Convert byte array to byte stream
// Turn the flow back Image, Is used to PNG From a photo to jpg, Compress the volume for preservation .
System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);
imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);// Save the picture
context.Response.Write("OK");// Output call result
catch (Exception msg) {
img = null;

utilize html5 Call the local camera to take photos and upload more related articles

  1. utilize html5 Call local camera to take photos and upload pictures [ turn ]

    utilize html5 Call local camera to take photos and upload pictures   html5 No nonsense about concepts , I don't know   Baidu ,  Google a bunch .. I learned today html5 Medium Canvas Combined with the new <video> Tag to get the local camera , ...

  2. How to make HTML5 Call the mobile camera to take photos —— Practice is everything

    original text : How to make HTML5 Call the mobile camera to take photos -- Practice is everything NanShan Xiaobian provides ideas to you . The most important thing in learning programming is practice , I have good code , But I hope everyone can write their own code HTML5 Th ...

  3. Call local camera to take photos (H5 And canvas )

    About H5 and canvas Realization of calling local camera to take pictures 1. Code implementation (html part ) <input type="button" title=" Turn on camera " v ...

  4. HTML5 Call local camera screen , Taking pictures , Upload server

    Realize functions and applicable business Capture local camera to get camera image , Take photos and save , Upload server : Front end upload image processing , Exhibition , narrow , tailoring , Upload server Implementation steps Access to local cameras (getUserMedia)/ To upload pictures , The picture / Video display ...

  5. getUserMedia API And HTML5 Call the mobile camera to take photos

    getUserMedia API brief introduction HTML5 Of getUserMedia API Provides access to hardware device media for users ( camera . video . Audio . Location, etc ) The interface of , Based on this interface , Developers can use the ...

  6. html5 Call the phone camera , Realize the photo upload function

    Do mobile website today , Want to achieve mobile phone scanning QR code function . First, we can call the mobile phone camera in the browser. , Realize the photo taking function and display the photos on the page and upload them to the server , And then analyze it on the server side . First, the camera is called in the browser. , Now, of course ...

  7. H5 Mixed development of two-dimensional code scanning and call the local camera

    Today, the supervisor gave me a need , It's about hybrid development , use H5 Call the local camera to scan the QR code , I've done a QR code scan of native Android before , Mainly by calling zxing Plug in operation , And there's a flash . But pure H5 I haven't touched , indecisive ...

  8. HTML5 Call the phone camera , Support only OPPOHD browser

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Call the local camera and pass the canvas Taking pictures

    First, we need to build a new one video label , And put it in html inside var video = document.createElement("video"); video.autoplay=& ...

Random recommendation

  1. JVM Memory monitoring tool Jconsole

    -------------Jconsole Monitoring remote linux On the server tomcat ----------------------------- 1.linux On the server tomcat Of bin/cat ...

  2. Visual Studio 2010 Add new item missing [ADO.NET Entity data model ] resolvent

    When doing ASP.NET MVC Project development , Prepare to use EF Database access , My development model is "Table First". therefore , Ready to Model New directory EF Data table mapping file for . But , In the add new project window ...

  3. fatal error C1083: Can't open include file :&ldquo;stddef.h&rdquo;: No such file or directory

      stay VS2012 Install this folder in the directory D:\Program Files\Visual Studio 2012\VC\include eureka stddef.h file , Add it to the included directory of the project ,OK. ...

  4. Socket Examples of Communications (C#)

    SOCKET principle One . Socket (socket) Concept Socket (socket) Is the cornerstone of communication , It's supporting TCP/IP Basic operation unit of network communication of protocol . It is an abstract representation of the endpoint in the process of network communication , Contains five kinds of information necessary for network communication : ...

  5. WebService Easy to use

    1. establish Webservice Service application Mode one : take VS2010 Default framework used , Use framework instead .NET Framework2.0\3.0\3.5, A new one is created " project "or newly build " ...

  6. SQL Basic grammar of Daquan

    One . Basics 1. explain : Create database CREATE DATABASE database-name 2. explain : Delete database drop database dbname 3. explain : Backup sql server --- ...

  7. win10 Right click menu slow solution

    Originally wanted to use win7 Of , I don't want to spend a lot of time tossing . Now the new computer motherboard hard disk CPU It's all crowding out win7 , What a pity . On the subject : The performance of the new computer should be pretty good , 18 Annual running points 29w above , But it takes a few seconds to right-click on the icon ...

  8. OTL translate (1) -- explain

    explain This document describes 4.0 Version of ORACLE/ODBC and DB2-CLI Template library (OTL).OTL4.0( Later referred to as" OTL) Template library is based on C++ The template of . OTL4.0 It's a combination C++ Template framework and OTL Adapter . ...

  9. ( The finger of the sword Offer) Interview questions 10: Binary 1 The number of

    subject : Enter an integer , Output this number in binary representation 1 The number of . Negative numbers are represented by complements . Ideas : Obviously , This problem is about bit operations . 1. Move the integers right in turn , Determine whether the last digit of an integer is 1(&1): problem : If the integer is negative ...

  10. Examples of exception handling for stored procedure errors --&gt; DECLARE EXIT HANDLER FOR SQLEXCEPTION ( turn )

    Just now a friend asked :  mysql   It's similar  mssql  There is no way to exit execution ? For example, I execute a certain condition , Now the execution is terminated .  Remember the stored procedure written before , It took a long time to find it , Send it to him , Hope to help him , Post here , Reserved for ...