Breaking News: Grepper is joining You.com. Read the official announcement!

React Image Captcha Canvas

Readul Ahmed answered on June 4, 2024 Popularity 1/10 Helpfulness 1/10

answer React Image Captcha Canvas

React Image Captcha Canvas

Comment

import React from 'react'
import { useRef, useEffect } from 'react';
import Imge  from './captcha-background.jpg';

const Canva = (props) => {
    const canvasRef = useRef(null);
    const [reset, setReset] = useState(0)

    useEffect(() => {

        if(props.captcha)
        {
            const canvas = canvasRef.current;
            if (!canvas) {
                console.error('Canvas reference is not available.');
                return;
            }
        
            const context = canvas.getContext('2d');
            const image = new Image();
            image.src = Imge.src;
        
            image.onload = () => {
                // Clear the canvas before drawing
                context.clearRect(0, 0, canvas.width, canvas.height);
        
                // Draw the image on the canvas
                context.drawImage(image, 0, 0, props.width, props.height);
        
                // Set text properties before drawing text
                context.font = 'bold 30px sans-serif';
                context.fillStyle = '#fff'; // Ensure white text color
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.letterSpacing = '20px';
        
                // Check if captcha is valid before drawing it
                if (props.captcha) {
                    context.fillText(props.captcha, props.width / 2, props.height / 2);
                } else {
                    console.error('Captcha is not available or invalid.');
                }
            };
        
            image.onerror = (err) => {
                console.error("Error loading the image:", err);
            };
        }else{
            setReset(reset + 1)
        }
      
    }, [props.width, props.height, props.captcha, reset]);

    return <canvas ref={canvasRef} width={props.width} height={props.height} className='capcha-canva' />;
}

export default Canva

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: canvas captcha react-image whatever

Link to this answer
Share Copy Link

Contributed on Jun 04 2024

Readul Ahmed

0 Answers Avg Quality 2/10

React Image Captcha Canvas

Contents

More Related Answers

React Image Captcha Canvas

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.