我正在尝试捕获多个图像，然后保存到数据库中，这是js代码
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const docs = document.getElementById('documents')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
captureButton.addEventListener('click', (e) => {
context.drawImage(player, 0, 0, canvas.width, canvas.height)
e.preventDefault();
let new_image = document.createElement('img')
new_image.src = canvas.toDataURL()
console.log(new_image)
docs.value = canvas.toDataURL()
form.insertAdjacentElement('beforeend',new_image)
e.preventDefault();
});
navigator.mediaDevices.getUserMedia({video: true})
.then((stream) => { player.srcObject = stream;})
<form id="form" action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
<video id="player" controls autoplay></video>
<button type="button" id="capture">Capture</button>
<button>save</button>
<canvas id="canvas" width=320 height=240></canvas>
<input type="text" name="documents" hidden id="documents">
</form>
这是我的views.py来获取多个base64数据并使用其分割它data属性，这是我的代码
@login_required
def add_new_image(request,id):
obj = get_object_or_404(Booking,id=id)
if request.method == 'POST':
images = request.POST.get('documents')
data,imgdata = images.split('data')
for img in imgdata:
print(img)
format, imgstr = img.split(';base64,')
ext = format.split('/')[-1]
data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
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})
但它引发了这个错误：
没有足够的值来解压（预期为 2，实际为 1）
and the print(img)仅返回： !当我删除 for 循环并添加它时format, imgstr = imgdata.split(';base64,')它只保存最后一张图像！请问有什么方法可以实现它，将js中的所有base64数据添加到输入标签，然后按其数据base64属性分割输入数据？
提前致谢 ..
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
captureButton.addEventListener('click', (e) => {
context.drawImage(player, 0, 0, canvas.width, canvas.height)
let new_data = document.createElement('input') // <== use <input>
new_data.setAttribute('name','document')
new_data.value = canvas.toDataURL()
form.insertAdjacentElement('beforeend',new_data)
});
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>
https://jsfiddle.net/c7ykg83h/ https://jsfiddle.net/c7ykg83h/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
