如何從網絡攝像頭捕獲圖片並將其存儲在 Django 的 ImageField 中？

Question

我想從網絡攝像頭拍照並將其保存在 ImageField 中。 我已經看到了一些與這個問題相關的結果，但我無法理解它們是如何工作的。 例如： 如何從網絡攝像頭捕獲圖片並將其存儲在 Django 的 ImageField 或 FileField 中？ 我的 HTML 表格

<div class="contentarea">
<div class="Input">
    <form method="POST" name="inputForm" enctype='multipart/form-data'>
        {% csrf_token %}
        <div id="camera" class="camera">
            <video id="video">Video stream not available.</video>
            <button id="startbutton" type="button">Take photo</button>
            <input id="webimg" value="" name="src" type="text" style="display: none;">
            <canvas id="canvas">
            </canvas>
        </div>
        <br>
        <div>
            <img id="photo" alt="your image">
        </div>
        <br>
        <button type="submit" class="btn btn-outline-warning" id="submit">Save</button>
    </form>
</div>
<img src="{{ path }}" alt="The screen capture will appear in this box.">

Javascript

#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#canvas {
  display:none;
}

.camera {
  width: 340px;
  display:inline-block;
}

.output {
  width: 340px;
  display:inline-block;
}

#startbutton {
  display:block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  bottom:32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}

.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}

CSS

@login_required(login_url='accounts:login')
def image_upload(request, slug):
    return_obj = get_object_or_404(Return, slug=slug)


    if request.method == 'POST' :
        path = request.POST["src"]
        image = NamedTemporaryFile()
        image.write(urlopen(path).read())
        image.flush()
        image = File(image)
        name = str(image.name).split('\\')[-1]
        name += '.jpg'
        image.name = name
        obj = ReturnImage.objects.create(image=image,slug=return_obj.slug)
        obj.save()
        return redirect("return_module:index")
    context = {
        'returnn': returnn,
    }
    return render(request,"return/image_upload.html",context)

我的觀點.py

 @login_required(login_url='accounts:login') def image_upload(request, slug): return_obj = get_object_or_404(Return, slug=slug) if request.method == 'POST': path = request.POST["src"] image = NamedTemporaryFile() image.write(urlopen(path).read()) image.flush() image = File(image) name = str(image.name).split('\\')[-1] name += '.jpg' image.name = name obj = ReturnImage.objects.create(image=image,slug=return_obj.slug) obj.save() return redirect("return_module:index") context = { 'returnn': returnn, } return render(request,"return/image_upload.html",context)

事實上，我試圖理解鏈接中的所有代碼，但不知何故我無法實現我想做的事情。 如果你能幫我解決這個問題，我會很高興。 謝謝你的幫助。

Answer 1

此代碼在服務器中不起作用，因為您正在嘗試訪問瀏覽器生成的本地臨時文件。 因此，您的瀏覽器生成文件並保存在您的磁盤上 - 然后服務器在服務器磁盤上找到一個與臨時文件同名的文件，這不起作用。 我的建議是您使用ajax將文件發送到服務器路由（例如，請查看fetch或在您的項目中包含 jQuery）。 使用fetch您可以發送包含文件的發布請求，然后將其保存在服務器磁盤/數據庫/任何您想要的東西上。

Django 中的文件上傳文檔：https://docs.djangoproject.com/en/4.0/topics/http/file-uploads/

獲取發送文件的示例： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file

JQuery： https://api.jquery.com/jquery.ajax/