近期写了Django从前端摄像的视频拍照取像的问题。
首先是前端的取像问题，这里是将是视频的某一帧画面绘制在canvas上，然后从canvas画布上取图像信息。
下面的代码是在画布上生成图像，换成点击事件取像也行：
video = document.getElementById(‘video‘); canvas = document.getElementById(‘canvas‘); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator .mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({ video: true, audio: false }, function (stream) { document.getElementById(‘video‘).srcObject = stream; }, console.log) setInterval(function () { canvas.getContext(‘2d‘).drawImage(video, 0, 0, video.videoWidth, video.videoHeight); }, 2500);
将画布上的图像数据取出，打包成jpg文件对象：
let blob = canvas.toDataURL("image/jpeg").substring(23);
let file = new File([blob], ‘img.jpg‘, {type: ‘image/jpeg‘});
这里的 “substring(23)” 是将数据流开头的文件描述对象信息去除，只剩下图像文件的字节流。
将file文件对象使用 FromData发送给后端即可，这里用base64格式发送：
fromData.append(‘img_base64‘, file); fromData.append(‘name‘, $(‘#name‘).val()) fromData.append(‘role‘, $(‘#role‘).val()) $.ajax({ url: ‘faces‘, type: ‘post‘, data: fromData, processData: false, contentType: false, success: function (data) { $(‘#result‘).text(data.result); } })
Django接受数据的代码如下，这里保存为了本地图片，完整的数据流已经到手，要做什么都可以：
def faces(request): if request.method == ‘POST‘: file = request.FILES.get(‘img_base64‘) file_data = file.read() # img_data = file_data.strip().split(",")[-1] img = base64.b64decode(file_data) fh = open("temp_pic.jpg","wb") fh.write(img) fh.close()
原文：https://www.cnblogs.com/DingAi/p/14802347.html