gpt4 book ai didi

javascript - 如何通过输入字段发送捕获的网络摄像头图像并保存到服务器

转载 作者:行者123 更新时间:2023-12-04 13:16:16 24 4
gpt4 key购买 nike

我正在做一个项目,用户可以通过使用他的网络摄像头来更改他的个人资料照片。我通过网络摄像头成功捕获了图像,但我无法将该捕获图像附加到我的形式

这是我的 HTML 代码

<div class="form-group">
<label for="exampleInputFile">Profile Picture</label>
<div class="input-group">
<div class="custom-file">
<input type="file" id="photo" class="custom-file-input" name = "profile_pic" accept="image/png,image/jpg,image/jpeg">
<label class="custom-file-label" for="exampleInputFile">Choose Image</label>
</div>
</div>
</div>


<div class="camera">
<video id="video">Video stream not available.</video>
<button type="button" id="startbutton" class="btn btn-success" data-toggle="modal" data-
target="#modal-success">Take photo</button>
</div>

这是我的 js 代码,我遵循这个 tutorial寻求帮助

<script>
(function() {
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.

var width = 770; // We will scale the photo width to this
var height = 900; // This will be computed based on the input stream

// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.

var streaming = false;

// The various HTML elements we need to configure or control. These
// will be set by the startup() function.

var video = null;
var canvas = null;
var photo = null;
var startbutton = null;

function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');

navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});

video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);

// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.

if (isNaN(height)) {
height = width / (4/3);
}

video.setAttribute('width', 340);
video.setAttribute('height', 300);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);

startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);

clearphoto();
}

// Fill the photo with an indication that none has been
// captured.

function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}

// Capture a photo by fetching the current contents of the video
// and drawing it into a canvas, then converting that to a PNG
// format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply
// other changes before drawing it.

function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);

var data = canvas.toDataURL('image/ ');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}

// Set up our event listener to run the startup process
// once loading is complete.
window.addEventListener('load', startup, false);
})();



</script>

现在如何将捕获的图像放入 <input type="file"> 中?字段,用于上传到服务器

注意:我不想为此使用ajax。

最佳答案

1- 将 base64 图像作为字符串发送,然后在服务器端将其转换为文件。

2- 将 Base64 字符串转换为 Blob,以将其作为文件上传到服务器。

我解释第二个选项:

首先,使用此函数将 Base64 字符串转换为 Blob:

function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data); // window.atob(b64Data)
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

现在,制作您的表单(您可以使用 CSS 隐藏它):

<form id="myAwesomeForm" method="post">
<input type="text" id="filename" name="filename" /> <!-- Filename -->
</form>

然后,使用 FormData 将图像附加到表单:

var form = document.getElementById("myAwesomeForm");

var ImageURL = photo; // 'photo' is your base64 image
// Split the base64 string in data and contentType
var block = ImageURL.split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];

// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);

// Create a FormData and append the file with "image" as parameter name
var formDataToUpload = new FormData(form);
formDataToUpload.append("image", blob);

最后,您可以使用任何方法发送您的 formData,例如:

var request = new XMLHttpRequest();
request.open("POST", "SERVER-URL");
request.send(formDataToUpload);

希望对您有所帮助;)

关于javascript - 如何通过输入字段发送捕获的网络摄像头图像并保存到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60188877/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com