我需要在客户端用 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 等。所以如果我这样做,我怎么能抓住它来在视图上操作它......? 如果有人知道那样做,对我来说一切都好!