摄像头拍照 js.

(请使用谷歌浏览器打开。)

	
	
 

 

	
	Snap Photo 
	save

	

 

上面的代码只是拍照并下载到谷歌浏览器的下载文件夹里，下面的是将拍照传到后台保存或者其他操作。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    var mediaConfig = {
        video : true
    };
    var errBack = function(e) {
        console.log('An error has occurred!', e)
    };
    // Put video listeners into place
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
            // video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }
    /* Legacy code below! */
    else if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(mediaConfig, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(mediaConfig, function(stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
        navigator.mozGetUserMedia(mediaConfig, function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    // Trigger photo take
    document.getElementById('save').addEventListener('click', function() {
        context.drawImage(video, 0, 0, 640, 480);
        saveFile(filename)
    });
}, false);

// save canvas image to file
var type = 'png';
// generating file name
var filename = (new Date()).getTime() + '.' + type;

var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};

var saveFile = function(filename) {
    // 从canvas中直接提取图片元数据
    var imgData = document.getElementById('canvas').toDataURL(type);
    //console.log("imgData==========="+imgData)
    //将mime-type改为image/octet-stream，强制让浏览器直接download
    //imgData = imgData.replace(_fixType(type), 'image/octet-stream');
    //图片download到本地
    /*var save_link = document.createElementNS('http://www.w3.org/1999/xhtml','a');
    save_link.href = imgData;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);*/

    if (imgData.lastIndexOf('data:base64') != -1) {
        imgData = imgData.replace('data:base64', 'data:image/jpeg;base64');
    } else if (imgData.lastIndexOf('data:,') != -1) {
        imgData = imgData.replace('data:,', 'data:image/jpeg;base64,');
    }
    if(isCanvasSupported()){
        ajaxUploadBase64File(imgData);
    }else{
        alert("您的浏览器不支持");
    }
    $("#photo_dialog").dialog("close");//关闭dialog
};
//ajax异步上传
function ajaxUploadBase64File(base64Data){
    $.ajax({
        url:'自己写路径',
        type:"post",
        data:{自己写参数},
        success:function(data){
            if (data != "") {
                //layer.msg('拍照成功!',{icon:1,time:2000});
                //location.reload();
                alert("拍照保存成功");
            }else{
                //layer.msg('拍照成功!',{icon:1,time:2000});
                alert("拍照保存失败");
            }
        },
        error:function(){
            //layer.msg(e+'拍照保存失败!',{icon:1,time:2000});
            alert("拍照保存失败");
        }
    });
};
//是否支持canvas
function isCanvasSupported(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
};