javascript - 如何将base64数据解码为图像django-js
问题描述
我试图将捕获的图像(编码数据)从画布保存到数据库中,但它只保存一个空白图像?
这是我的代码
const player = document.getElementById('player');
const docs = document.getElementById('document')
const captureButton = document.getElementById('capture');
const constraints = {
video: true,
};
captureButton.addEventListener('click', (e) => {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const imgFormat = canvas.toDataURL();
docs.value = imgFormat
context.drawImage(player, 0, 0, canvas.width, canvas.height);
e.preventDefault();
});
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
<form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
<input type="text" name="documents" id="document">
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<button class="header pt-2 text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
</form>
这是我的views.py和models.py
class Document(models.Model):
booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
docs = models.ImageField(upload_to=upload_docs)
我的意见.py
import base64
from django.core.files.base import ContentFile
@login_required
def add_new_image(request,id):
obj = get_object_or_404(Booking,id=id)
if request.method == 'POST':
data = request.POST.get('documents')
format, imgstr = data.split(';base64,')
ext = format.split('/')[-1]
data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
if data:
photo = Document.objects.create(
booking = obj,
docs = data
)
photo.save()
return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
else:
messages.error(request,_('choose or capture right image ..'))
return render(request,'booking/add_img.html',{'obj':obj,'form':images})
非常感谢您的帮助,如果您对此有所了解,请告诉我,非常感谢
解决方案
您需要先绘制然后获取内容。
对于如何进行多次捕获。
您可以重复使用相同的画布,这toDataURL
是当前画布的快照。
这是一个例子。
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const docs = document.getElementById('document')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
captureButton.addEventListener('click', (e) => {
context.drawImage(player, 0, 0, canvas.width, canvas.height)
// this is just an example, you need a <input> so it's send by form (or use async request)
let new_image = document.createElement('img')
new_image.src = canvas.toDataURL()
form.insertAdjacentElement('beforeend',new_image)
});
navigator.mediaDevices.getUserMedia({video: true})
.then((stream) => { player.srcObject = stream;})
form *{max-width:20vw;}
img{display:inline-block;}
canvas{display:none;}
<form id="form" action="" method="POST" enctype="multipart/form-data">
<video id="player" controls autoplay></video>
<button type="button" id="capture">Capture</button>
<button>save</button>
<canvas id="canvas" width=320 height=240></canvas>
</form>
推荐阅读
- arrays - 检查数组值时Jhipster webpack编译错误
- express - 为什么 axios 会在成功的 Spotify API 调用上捕获错误?
- python - 将 Python3 与来自 C++ 的 pybind11 与 multiprocessing.Process 一起使用
- css - 为什么我的 Vue.js 过渡(CSS 动画)没有触发?
- c# - Boolean cast Specified cast is not valid error - Passing value from a case statement to a reader.GetBooleanVal
- c# - EF 跟踪与非跟踪
- python - Pandas Interpolate 函数对索引有限制吗?
- java - 运行两次方法
- rest - 可以更改系统状态的 RESTful GET?
- vue.js - Vue 过渡适用于路由器视图,但不适用于组件内部