Ashique's Programming Diary: 2020

Wednesday, August 26, 2020

Custom captcha in wordpress and inject it to ACF front end form

First create a file in your theme named: fcaptcha.php
fcaptcha.php

<?php

session_start();

$permitted_chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ';

function generate_string($input, $strength = 10) {

$input_length = strlen($input);

$random_string = '';

for($i = 0; $i < $strength; $i++) {

$random_character = $input[mt_rand(0, $input_length - 1)];

$random_string .= $random_character;

}

return $random_string;

}

$image = imagecreatetruecolor(200, 50);

imageantialias($image, true);

$colors = [];

$red = rand(125, 175);

$green = rand(125, 175);

$blue = rand(125, 175);

for ( $i = 0; $i < 5; $i++ ) {

$colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);

}

imagefill($image, 0, 0, $colors[0]);

$black = imagecolorallocate($image, 0, 0, 0);

$white = imagecolorallocate($image, 255, 255, 255);

$textcolors = [$black, $white];

$string_length = 6;

$captcha_string = generate_string($permitted_chars, $string_length);

$_SESSION['captcha_text'] = $captcha_string;

imagestring($image, 18, 10, 12, $captcha_string, $textcolors[rand(0, 1)]);

imagepng($image);
************************************
After that, in functions.php file put the below code to start session:

if ( ! session_id() ) {
session_start();
}

And add below lines to functions.php to localize some data:

wp_enqueue_script('jsScript', get_template_directory_uri() . '/js/script.js', array('jquery'), false, true);
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
wp_localize_script( 'jsScript', 'globalJSObject', $translation_array );

script.js
$('<img/>').attr({ src: globalJSObject.templateUrl+'/fcaptcha.php', id: 'captcha_image'}).appendTo('.solution_captcha');

See the class name of solution_captcha, it can be anything but you will need to put that class in your ACF captcha field.

Sunday, August 9, 2020

PWD equivalent command in Windows command prompt

pwd = echo %cd%

Monday, March 9, 2020

Take photo from video tag

Take photo from video tag:
-------------------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Run webcam into video tag</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h5>Playing video and you can take image from it</h5>
    <video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>

    <button onclick="capture()">Capture</button>

    <canvas width="320" height="360" id="PhotoEditS">
      <p>
        <font color="white">This browser does not support the required features. Please try
        <a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">Internet Explorer 10</a>,
                                                or a current version of
        <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>,
        <a href="http://www.google.com/chrome">Chrome</a>, or
        <a href="http://www.apple.com/safari/">Safari</a>.</font>
      </p>
    </canvas>

    <img id="imageTag" src="" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        // Playing video
        const video = document.getElementById('webCamera');
        startVideo();
        function startVideo(){
            var front = false;
            video.style.width = document.width + 'px';
            video.style.height = document.height + 'px';
            video.setAttribute('autoplay', '');
            video.setAttribute('muted', '');
            video.setAttribute('playsinline', '');
            var constraints = {
                audio: false,
                video: {
                    facingMode: (front ? 'user' : 'environment')
                }
            }
            navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
                video.srcObject = stream;
            });
        }

        function capture(){
            // Take the picture now
            var pcanvas = document.getElementById('PhotoEditS');
            pcanvas.width = video.videoWidth;
            pcanvas.height = video.videoHeight;
            pcanvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

            var canvas      = $('#PhotoEditS')[0];
            var base64img   = canvas.toDataURL("image/png");

            $('#imageTag').attr('src', base64img);
        }
    </script>
</body>
</html>
</body>
</html>

Playing video on html5 video tag

Playing video on html5 video tag:
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Run webcam into video tag</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h5>Playing video and you can take image from it</h5>
    <video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
       // Playing video
       const video = document.getElementById('webCamera');
       startVideo();
       function startVideo() {
            var front = false;
           video.style.width = document.width + 'px';
           video.style.height = document.height + 'px';
           video.setAttribute('autoplay', '');
           video.setAttribute('muted', '');
           video.setAttribute('playsinline', '');
           var constraints = {
               audio: false,
               video: {
                   facingMode: (front? 'user' : 'environment')
               }
           }
           navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
               video.srcObject = stream;
           });
       }
    </script>
</body>
</html>

Monday, February 10, 2020

Grab contact form 7 field data during cf7 form submission

Watch out the code below:

add_action( 'wpcf7_before_send_mail', 'm2sys_action_wpcf7_sent' );

function m2sys_action_wpcf7_sent($args)
{
    global $wpdb, $wp;

    $submission = WPCF7_Submission::get_instance();

    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
    }

    $first_name = isset($posted_data['your-name']) ? $posted_data['your-name'] : 'Name not found';
    $data = 'Your name:' . $first_name;

    update_option( 'cf7_data', $data );
}