0

我正在 React 上构建一个应用程序，我需要拍照，然后在上面画画，我为此使用“react-webcam”；拍摄照片，并在我使用 CanvasDraw 的图片上绘画时，我的问题是当我将图像传输到 CanvasDraw 时，它变得非常模糊，有没有人有想法，或者可能更改摄影和绘画库？谢谢大家我附上相关代码。

import Webcam from "react-webcam";
import CustomButton from "../custom-button/custom-button";
import Draw from '../draw/Draw'
// export  const WebcamComponent = () => <Webcam />;
export const WebcamComponent = (props) => {
    const webcamRef = useRef(null);
    const [imgSrc, setImgSrc] = useState([]);
    const [camera, setCamera] = useState(false);
    const [degObj, setDeg] = useState({});

    const capture = useCallback(() => {
        const imageSrc = webcamRef.current.getScreenshot();
        // if (props.setSrc) {
        //     props.setSrc(imageSrc) 
        // }
        setImgSrc([...imgSrc, imageSrc], props.setSrc ? props.setSrc(imgSrc) : null);
        setCamera(!camera)

    }, [webcamRef, setImgSrc, setCamera, camera, imgSrc, props]);
    let openCamera = () => {
        setCamera(!camera)
    }
    let ChangeDeg = (index) => {
        console.log(index);
        console.log("ChangeDeg", degObj);
        setDeg({ ...degObj, [index]: degObj[index] && degObj[index] === 360 ? 0 : degObj[index] ? degObj[index] + 90 : 90 })
    }
    return (
        <>
            <CustomButton onClick={openCamera}>
            Camera
            </CustomButton>
            {camera && [<Webcam
                audio={false}
                ref={webcamRef}
                width={95 + 'vw'}
                screenshotFormat="image/jpeg"
            />,
            <button onClick={capture}>Capture photo</button>]}

            {imgSrc && (imgSrc.map((srcr, index) => [
            <button key={'button' + index} onClick={() => ChangeDeg(index)}>rotated</button>,
             <Draw key={'Draw' + index} style={{ transform: `rotate(${degObj[index]}deg)` }} id={'id' + index} brushRadius={1} brushColor="red" imgSrc={srcr} />]
            )

            )}
        </>
    );
};


  // https://www.npmjs.com/package/react-webcam
4

0 回答 0