JS调用摄像头捕获PNG图像存储位置及Django对接问题

捕获图像的实际存储位置 #

你当前实现的代码中，摄像头捕获的图像没有写入本地磁盘做持久化存储，所有图像数据都临时存在浏览器的运行内存中：

• 拍照时首先从摄像头视频流中抓取单帧，绘制到页面上隐藏的<canvas>元素中，此时帧数据存储在canvas对应的渲染内存块里
• 调用canvas.toDataURL('image/png')方法后，canvas中的像素数据会被编码为PNG格式的base64字符串，转移到JavaScript的运行时内存中存储，页面关闭后这部分内存就会被释放。

data变量与photo变量的差异 #

两个变量存储的内容完全不同，不要混淆：

• data是takepicture()和clearphoto()函数内的局部变量，存储的是完整的PNG图像base64编码字符串，格式为data:image/png;base64,xxxxxx，这部分才是图像的实际内容本体。
• photo是通过DOM接口获取到的页面对应<img>标签的元素对象，本身不存储图像数据。你调用photo.setAttribute('src', data)只是将img标签的资源地址指向base64格式的图像字符串，让浏览器可以把图像渲染到页面上，图像内容并没有赋值给photo变量。

传递PNG图像到Django视图的实现步骤 #

前端修改逻辑 #

在takepicture()函数获取到data变量后，直接通过异步请求将base64图像数据发送到Django后端即可，注意Django默认要求POST请求携带CSRF令牌，参考实现代码如下：

// 获取CSRF令牌的辅助函数，放在script标签全局即可
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 修改原有takepicture函数，增加发送请求的逻辑
function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);

        // 发送图像到Django后端
        fetch('/your-face-handle-url/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: 'captured_image=' + encodeURIComponent(data)
        }).then(response => response.json())
        .then(res => {
            // 这里可以写后端返回结果后的页面逻辑，比如跳转到识别结果页
            console.log('接口返回', res);
        })
    } else {
        clearphoto();
    }
}

Django后端处理逻辑 #

• 先在路由文件中把你自定义的接口地址（比如/your-face-handle-url/）映射到对应视图函数
• 视图函数中接收POST传递的base64字符串，去掉前缀后解码为二进制PNG数据，就可以做后续的人脸识别、存储等操作，参考代码：

import base64
from django.http import JsonResponse

def face_capture_handle(request):
    if request.method == "POST":
        image_base64 = request.POST.get("captured_image")
        # 剥离base64格式前缀
        _, img_content = image_base64.split(";base64,")
        # 解码得到PNG二进制数据
        img_binary = base64.b64decode(img_content)

        # 后续自定义处理逻辑：比如存到服务器本地、传入人脸识别模型、关联用户数据都可以
        # 示例：存为本地文件
        with open("captured_face.png", "wb") as f:
            f.write(img_binary)
        
        return JsonResponse({"code": 0, "msg": "图像接收成功"})
    return JsonResponse({"code": -1, "msg": "请求方式错误"})

内容的提问来源于stack exchange，提问作者deniz