file - 我可以将使用 getUserMedia 收到的值传输到输入文件吗?
问题描述
我有一个在 webview 下运行的 html5 web 应用程序。
我想通过从用户的相机拍照来发送带有表单 enctype multipart/form-data 的数据。
我在输入类型文件中尝试了一些东西,但不幸的是,当我在所有文件中按“选择文件”时,它会打开相机和文件选择列表。
<form action="/upload.asp" method="post" enctype="multipart/form-data">
<input type="file" id="cameraPic" accept="image/*;capture=camera" /><br>
<input type="file" id="cameraPic" capture="environment" accept="image/*"/><br>
<input type="file" id="cameraPic" capture="user" accept="image/*"/><br>
<input type="file" id="cameraPic" name="profile_pic" accept=".jpg, .jpeg"/><br>
<input type="submit">
</form>
所以我想尝试用“mediaDevices.getUserMedia”捕捉和上传相机。
使用下面的代码,我可以拍照并在页面上查看。但是如何将图像从页面发送到后端?
- 输入文件值的分配(我认为这不是出于安全原因)
- 找到Base64代码,上传到Textarea发送。
- 将“上传”按钮放在“拍照”按钮旁边。
我不确定要做什么以及如何去做?
我不知道我的路径是否正确。
另一个问题是“getUserMedia”后置摄像头无法打开。
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Take Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body,video {margin:0;padding:0;}
button {height:3em;width:10em;left:0;top:0;position:fixed;}
video {height:3em;width:10em;right:0;top:0;position:fixed;}
#takePhotoCanvas {width:100vw;height:100vh;left:0;top:3em;position:fixed;}
</style>
</head>
<body>
<button onclick="takePhotoButton()">Take Photo</button>
<video autoplay=""></video>
<canvas id="takePhotoCanvas"></canvas>
<script>
var imageCapture;
navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
})
.catch(error => console.log(error));
function grabFrameButton() {
imageCapture.grabFrame()
.then(imageBitmap => {
const canvas = document.querySelector('#grabFrameCanvas');
drawCanvas(canvas, imageBitmap);
})
.catch(error => console.log(error));
};
function takePhotoButton() {
imageCapture.takePhoto()
.then(blob => createImageBitmap(blob))
.then(imageBitmap => {
const canvas = document.querySelector('#takePhotoCanvas');
drawCanvas(canvas, imageBitmap);
})
.catch(error => console.log(error));
};
/* Utils */
function drawCanvas(canvas, img) {
canvas.width = getComputedStyle(canvas).width.split('px')[0];
canvas.height = getComputedStyle(canvas).height.split('px')[0];
let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
let x = (canvas.width - img.width * ratio) / 2;
let y = (canvas.height - img.height * ratio) / 2;
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
x, y, img.width * ratio, img.height * ratio);
};
</script>
</body>
</html>
解决方案
这个MDN 教程很有价值。
看起来您需要canvas.toBlob()。
这样的事情可能会奏效。
canvas.toBlob(function (blob){
const fd = new FormData();
fd.append('fname', 'pic.jpg');
fd.append('data', blob);
$.ajax({
type: 'POST',
url: '/uploadedendpoint ',
data: fd,
processData: false,
contentType: false
})
.done(function(data) {
console.log(data);
}, 'image/jpeg')
这使用 jquery ajax 调用从画布发布编码的 jpeg 图片。
没有调试......这取决于你。
推荐阅读
- amazon-web-services - AWS 混合云负载平衡流量
- angular - 如何以编程方式触发 Angular MatListItem 的涟漪效应?
- c# - 如何在针对具有自定义属性的所有源成员进行映射期间调用扩展方法?
- c - 试图制作一个对数组中的所有值进行平方的函数。在最后一个值上获取奇怪的数字
- babeljs - Babel:根编程选项
- .net - 在没有 IIS 的情况下托管旧版 WebAPI 进行测试
- shell - 脚本中从远程主机到本地服务器的 scp
- c++ - 避免向量中的对象切片
> - python - 流式传输 Flask 响应时保持 SQLAlchemy 会话处于活动状态
- python - 使用 Spyder (Python 3.6)...尝试对一个整数使用 2 个格式说明符