Question

我正在尝试在React中使用Canvas。我有一个上传的视频，上传后，我尝试绘制第一帧的图像（尚未播放）并用toDataURL保存。绘制时没有出现错误，尝试编码为base64时得到了很长的字符串，但是尝试测试该字符串时却得到了一个空图像。告诉Canvas绘制视频图像时，我感觉做错了。有人可以指出错误吗？

const videoRef = useRef(null);
const canvasRef = useRef(null);

然后，当视频加载时：

const HandleVideoEvents = () => {

        videoRef.current.onloadeddata = (e) => {
            props.duration(e.target.duration) // for other purposes

            canvasRef.current.width = e.target.videoWidth;
            canvasRef.current.height = e.target.videoHeight;
            video = e.target;
        
            props.setShowCanvas(); // for other purposes
            HandleExtractFrame();
        };
    }

我是否以错误的方式定位视频？然后，我绘制并保存：

const HandleExtractFrame = () => {

      ctx = canvasRef.current.getContext('2d')
      ctx.drawImage(video, 0, 0, canvasRef.current.width, canvasRef.current.height);
      frame = canvasRef.current.toDataURL("image/png");
      
      }

无法在React中使用Canvas绘制图像

0 个答案: