使用h5拍照压缩上传图片

　　

在H5中使用video调用手机相机，而后使用canvas捕捉视频内容获得图片。拍照和压缩上传

<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>

<script>

window.addEventListener("DOMContentLoaded", function () {
    var canvas = document.getElementById("canvas"),//调用canvas接口
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function (error) {//错误处理
                console.log("Video capture error: ", error.code);
            };
    if (navigator.getUserMedia) {//调用html5拍摄接口
        navigator.getUserMedia(videoObj, function (stream) {
            video.src = stream;//摄像机属于视频流，因此固然要输出到html5的video标签中了
            video.play();//开始播放
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);//同上
            video.play();//同上
        }, errBack);
    }
    else if (navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
        navigator.mozGetUserMedia(videoObj, function (stream) {
            video.src = window.URL.createObjectURL(stream);//同上
            video.play();//同上
        }, errBack);
    }
}, false);

document.getElementById("snap").addEventListener("click", function () {
    //获取拍照按钮绑定事件
    var canvans = document.getElementById("canvas");//调用canvas接口
    var context = canvas.getContext("2d");
    context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图


    //这里就能够写上传服务器代码了
    var dataURL = canvas.toDataURL("image/jpeg");//获取图片的base64格式的数据
    dataURL = dataURL.replace("data:image/png;base64,", "");
    var blobBin = dataURL;
    var array = [];
    for (var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
    }
    var file = new Blob([new Uint8Array(array)], { type: 'image/png' });
    var formdata = new FormData();
    formdata.append("myNewFileName", file);
    $.ajax({
        url: "uploadFile.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
    }).done(function (respond) {
        alert(respond);
    });
});


function UploadCompressedImage(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/jpeg");
    dataURL = dataURL.replace("data:image/png;base64,", "");
    var blobBin = dataURL;
    var array = [];
    for (var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
    }
    var file = new Blob([new Uint8Array(array)], { type: 'image/png' });
    var formdata = new FormData();
    formdata.append("myNewFileName", file);
    $.ajax({
        url: "uploadFile.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
    }).done(function (respond) {
        alert(respond);
    });
}

 

</script>