如何利用摄像头拍照上传图片（base64）

近日开发开发教室的时候，需要一个摄像头拍照的功能。由于我的视频采用的是webrtc，仔细思考后，要实现这个功能只需要解决两个点：

1，canvas捕获video的画面； 2，把canvas捕获的画面上传到服务器；

思路已定，那就开始：

canvas捕获video的画面

这一块儿其实就是canvas的drawImage的运用。

var _canvas = $('#show-camera canvas')[0],
    _context = _canvas.getContext('2d');
setInterval(function () {
    _context.drawImage($('#localView')[0], 0, 0, 640, 480);
}, 30);

每30s调用一次drawImage方法。注意的是，drawImage只能绘制img和video元素。

上传canvas绘制的图片

第一步是利用canvas的toDataURL方法，把之前绘制的图片转成base64格式图片；

_canvas.toDataURL('image/png')

第二步是...，很不幸base64格式图片不能直接上传。还好，在stackoverflow看到下面的代码：

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

通过上面代码把base64转成二进制的字符串，即是这个图片。然后二进制格式的图片是可以上传的！

var formData = new FormData();

formData.append('key', key);
formData.append('token', token);
formData.append('file', dataURItoBlob($('#show-camera img').attr('src')));

$.ajax({
    type : 'POST',
    url : 'http://up.qiniu.com/',
    data : formData,
    processData : false,
    contentType : false,
    ...

}）

上面是七牛上传图片的部分代码。

另外，这个只能PC上使用 （兼容性没有考证过），因为移动端涉及到大量运算，会由于性能比较差，非常卡而不能用。

Written on March 4, 2016