使用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>