我正在学习一个教程,并尝试使用网络摄像头将图像作为jpeg格式捕获,我想将其上载到firebase存储,在firebase存储中需要我将其作为文件或blob进行上载。我可以在使用时上传图像 <input type = 'file'>
格式,但我想直接从网络摄像头捕获上传图像。是否仍有将jpeg转换为文件或blob的方法?
这是密码
import React, { useState } from 'react'
import Webcam from 'react-webcam'
import firebase from 'firebase'
const WebcamComponent = () => <Webcam/>
const videoConstraints = {
width: 220,
height: 200,
facingMode: 'user'
}
const WebcamCapture = () => {
const webcamRef = React.useRef(null)
const [image, setImage] = useState('')
const capture = React.useCallback(
() => {
const imageSrc = webcamRef.current.getScreenshot()
setImage(imageSrc)
const file = image
var storage = firebase.storage()
storage.ref('FormPhotos/' + file.name).put(file).on('state_changed', alert('success'), alert)
console.log(image)
},
[webcamRef]
)
return (
<div className = 'webcam-container'>
<div className = 'webcam-img'>
{
image == '' ? <Webcam
audio = {false}
height = {200}
ref = {webcamRef}
screenshotFormat = 'image/jpeg'
width = {220}
videoConstraints = {videoConstraints}
/> : <img src = {image}/>}
</div>
<div>
{
image != ''
? <button onClick = {(e) => {
e.preventDefault()
setImage('')
}} className = 'webcam-btn'>
Retake Image
</button>
: <button onClick = {(e) => {
e.preventDefault()
capture()
}}>Capture</button>
}
</div>
</div>
)
}
export default WebcamCapture
1条答案
按热度按时间ecr0jaav1#
这个
getScreenshot()
方法返回当前网络摄像头图像的base64编码字符串。使用putString
方法代替put
把那个传过去imageSrc
其中:根据文件,
如果未指定contenttype元数据且文件没有文件扩展名,则云存储默认为application/octet stream类型。