javascript - 用 JavaScript 拍摄网络摄像头的照片并将其发送到数据库
问题描述
** 我使用网络摄像头为用户拍照。我将这张照片转换为文件,以便将其发送到服务器。我使用表单数据发送这个文件,它给了我一个 400 警告**
async function postImage(url, _image) {
let response = await fetch(url, {
method: 'POST',
body: _image
});
let uploadImage = await response.json();
return uploadImage;
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let cameraStream = null;
if (null == cameraStream) {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({video: true})
.then(function (stream) {
video.srcObject = stream;
video.play();
cameraStream = stream;
})
}
}
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}
document.getElementById("snap").addEventListener('click', () => {
video.style.display = 'none';
if (null != cameraStream) {
let context = canvas.getContext('2d');
let img = canvas.toDataURL('image/png', 0.5);
let file = dataURItoBlob(img);
context.drawImage(video, 0, 0, 640, 480);
let track = cameraStream.getTracks()[ 0 ];
track.stop();
video.load();
cameraStream = null;
let formData = new FormData();
formData.append("objectable",'attendance_times')
formData.append("filePath", file, "image.png");
for (var value of formData.values()) {
console.log(value);
}
setTimeout(()=>{
postImage(base_url+'/api/media', formData)
.then(data => console.log(data))
.catch(err => console.log(err));
},2000)
}
})
<video id="video" width="400" height="400" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<button type="submit" class="btn btn-success btn-lg btn-block" id="snap">snap photo</button>
不幸的是,我无法发送这个文件, 我不知道这段代码的问题出在哪里。如果可以解决此问题,请提供帮助
解决方案
我不认为你的帖子会那样工作。也许看看formdata对象。
推荐阅读
- react-native - 对象不是 React Native 中的函数(评估“concreteComponentProvider()”)
- javascript - 用于递归函数的 Webworker
- c# - 在条码前触发 shift 或 tab 键
- python - 如何获取日期和时间
- exist-db - eXist-DB configure security for REST / PUT requests
- c# - 如何在asp.net中异步显示gridview中的数据?
- javascript - 如何在 INPUT 表单中附加Child
- java - 使用来自arraylist的循环创建对象名称
- reactjs - 共享时反应共享图像不显示
- javascript - 如何打开具有不同ID的多个模态引导程序