Question

我需要在客户端用 JS [在 1 中完成] 拍下快照并将其发送到我的服务器 [在 2 中试用]。

现在，我可以通过表单/模型和视图使用 Django 自动生成的按钮将图像发送到服务器 (media/images/)，这允许用户从他自己的计算机中选择图片。

>

这里的事情是我不想依赖这个过程 - 这迫使用户从他的计算机中选择一个图像。相反，我希望当用户拍照时，程序自动将其发送到服务器，然后服务器将其存储在一个文件夹中。

我是 Django 的新手，所以如果您能在答案中提供一些代码，我将不胜感激。

player1.html

<video id="video"></video>
<canvas id="canvas"></canvas><br>
<button onclick="snap();">Snap</button>

JS

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({video: true}) // request cam
.then(stream => {
  video.srcObject = stream; // don't use createObjectURL(MediaStream)
  return video.play(); // returns a Promise
})

function snap () {
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  context.drawImage(video, 0, 0); // This draws the captured image on the canvas
}

player1.html

<div>
  <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
    <button id ='gg'>Upload</button>
  </form>
</div>

JS

function snap () {
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  context.drawImage(video, 0, 0); // This draws the captured image on the canvas
  console.log('canvas: ', canvas.toDataURL("image/jpeg"))
  var formData = new FormData();
  formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  formData.append("header_image", canvas.toDataURL("image/jpeg"));
  var xhr = new XMLHttpRequest();
  xhr.open( "POST", "http://127.0.0.1:8000/player1");
  xhr.send(formData);
}

views.py

...
from encodings.base64_codec import base64_decode

class AddPostView(CreateView):
    model = Post
    form_class = PostForm
    template_name = 'player1.html'
    # fields = '__all__'

    #def convert(self): I think I need something like this, but well written, to decode the image in here.. how should I write it, tho?
    #    print('here')
    #    base64_decode(self.object)
    #    print('hmm:', base64_decode(self.object))

urls.py

urlpatterns = [
    path('', views.index, name='index'),
    path('player1', AddPostView.as_view(), name='player1'),
]

models.py

class Post(models.Model):
    header_image = models.ImageField(null=True, blank=True, upload_to="images/")

    def get_absolute_url(self):
        return reverse('player1')

forms.py

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('header_image',)  # these fields came from models.py

[解决方案？ B：最后的希望] - 我也从有同样问题的人那里读到他们在数据库中添加了图像，使用 PHP 等。所以如果我这样做，我怎么能抓住它来在视图上操作它......？如果有人知道那样做，对我来说一切都好！

将 Canvas（网络摄像头快照）上传到 Django 服务器

0 个答案: