Berat Emre Nebioğlu | Dev Blog

Hello, I'm Berat Emre Nebioğlu. As an IT professional, I monitor and analyze emerging trends within the technology sector. The purpose of this blog is to share that knowledge, providing clear insights to help others stay current and navigate away from outdated methodologies and technical debt. I believe that understanding the evolving digital landscape is essential for any practitioner. Therefore, I dedicate myself to learning, exploring, and distilling key information—with the firm conviction that shared knowledge drives our entire industry forward.

TUTORIAL

Start working with canas.

Learn to select canvas with vanilla JS, styling, and using the fillRect API...

TUTORIAL

Start working with Flexbox - Basic

A guide to laying out unknown or dynamically sized items in a container...

PROJECT

Take a screenshot of HTML Page, do AJAX call establishing connection with backend, Sen email with PHP

Hello everyone, in that article, i tend to dive into backend stuff little bit, so i will get some help from PHP and try to introduce PHPMailer how handy it is..

TUTORIAL

Youtube Playlists

EDUCATIONAL

Course Sites

CODING PLATFORM

Playgrounds

Documentation

Essential Docs

Libraries

JS Libraries

Helper

Assets & Fonts

To see the result you can check jsfiddle.net. That is the place i will publish the code samples. You can create canvas element with 'canvas' tag. Then you should assign an id or class so as to work with it in Javascript. I just want to grab your attention here, you can select canvas element with jquery but you cannot do anything inside it. because it isn't elements. Therefore, javascript must be your choice anyway. Speaking of giving id or class to element, it can be done like that.

Select All -> Codes will be copited to clipboard


                <canvas id="canvas">
                </canvas>
                <canvas class="canvas">
                </canvas>

Canvas is an HTML element so you have two options to design this HTML element. You can design either with inline style or external. Creating separate .css file and-and set width, height, background color in external .css file is always best practice. We will style canvas element like below

External Styling

Select All -> Codes will be copited to clipboard


        .canvas{
         width:500px;
        height:500px;
        }

Additional note: in default canvas's width is 300px, canvas' height is 150px.

Default width and height

Functionality is important, to be honest. So we need javascript for that. Remember, don't use jquery, go for plain javascript. First of all we need to grab the dom object. Look at below;

Select All -> Codes will be copited to clipboard


        var canvas = document.querySelector('#canvas');
        /* Remember: We use "#" for id, "." for class.
        This principle is same as selecting element in css. */

Right now i am using var keywords. Keep it in your mind for future uses, in ES6, there is const keyword and that is new terminology for defining variable. However ES6 is not widely standardized amongst browser.

With that selection, you have dom api, also you need to have canvas api to use canvas functionality. In this point,

Select All -> Codes will be copited to clipboard


        var canvas = document.querySelector("#canvas");
        // It is for using dom API.

Select All -> Codes will be copited to clipboard


        var ctx = canvas.getContenxt('2d');
        // It is for using 2d canvas API.

It is time to draw something with canvas. There are a lot of shapes are predefined in canvas API such as rectangle, circle etc. Lets try fillRect(). FillRect has four parameters.

x coordinate
y coordinate
width
height

context.fillRect(0, 0, canvas.width, canvas.height);

Additional note: You can give any number instead of canvas.width or canvas.height also you can set in css part as we mentioned above. However if your canvas.

We can set the colors of canvas element with fillStyle(). Fillstyle method give you some flexibility while setting colour. You can set colour with string, with rgb values,with rgba values, with hex value, with hsv values or with hsl values.

Select All -> Codes will be copited to clipboard


        ctx.fillStyle = "blue";
        ctx.fillStyle = "rbg(255, 192, 203)";
        ctx.fillStyle = "rgba(255, 192, 203, 1)";
        // Fourth parameter is just for setting opacity.
        ctx.fillStyle = "#00FFFF";
        ctx.fillStyle = 'hsl('+h+', 100%, 50%)';

fillStyle() example

Warning: You have to be careful about orders. If you call fillStyle after fillRect. fillStyle wont work.

Additional content will be added soon.

Hello everyone, in that article, i tend to dive into backend stuff little bit, so i will get some help from PHP and try to introduce PHPMailer how handy it is. So content of this article consist of three parts as you easily pick up ftom the title. I tend to make a list of them.

Take a screen shot with Vanilla JavaScript HTML2Canvas
AJAX request with Vanilla Javascript MDN - Getting Started
Send email with PHP PHPMailer

I am debian jessie user. It is stable version of Debian. First we need to install LAMP server. For installing LAMP, you can follow these steps.

Next thing you have to install composer so as to get latest version of PHPMailer. Here is the steps for installing composer. By the way compose is PHP package manager.

HTML page is really simple just contains button and image.

Select All -> Codes will be copited to clipboard


        <!doctype html>
        <html>
        <head></head>
        <body>
        <p><button class="click">Send Email</button></p>
        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Sample pic" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js ">
        </script>
        <script src="./script/calculation.js"></script>
        </body>
        <html>

Javascript code seems a little complex but you will see what is going on with close look. We are just getting screenshot of div we want "container" div in this case and send that as parameter to passittobackend function. Passittobackend function is just callback of click event. Click event is just triggered when you click button that has "mail" class. In passittobackend function we are doing ajax call.

Select All -> Codes will be copited to clipboard


        // this is for taking screenshot.
        window.takeScreenShot = function() {
        html2canvas(document.querySelector(".container"), {
        onrendered: function(canvas) {
               //document.body.appendChild(canvas);
               passittobackend(canvas);
               },
             });
        }
        $('.mail').on('click', function() {
                 takeScreenShot();
        });
        function passittobackend(str){
                $.ajax({
                     type: "POST",
                     url:"mail.php",
                     data: {"dataString" : str.toDataURL()},
                     dataType: 'json',
                     success: function(data){
                            return data;
                     },
                     fail: function(){
                           alert("fail");
                     }
            });
        }

PHP part: If you look at the javascript code carefully you will see similarity with php. code. You can see similarity on that line

 data: {"dataString" : str.toDataURL()}

The data string is the index of $_POST array Thanks to "dataString index, now you have connection between backend and frontend. I need to get your attention before moving on in PHP. You cannot get canvas directly SetFrom frontend to backend. In order to carry on this operation, you need to get helps SetFrom ToDataURL method. Width that method you will have a string like below.

We should require PHPMailer class

Select All -> Codes will be copited to clipboard


        require_once "vendor/autoload.php";

then we need to have

Select All -> Codes will be copited to clipboard


        use PHPMailer\PHPMailer\PHPMailer;

Additional Note about debugging PHP

Select All -> Codes will be copited to clipboard


        error_reporting(-1);
        ini_set('display_errors', '1');

We need to cut first 22 character of string. We will use function.substr Then we will use function.base64_decode

In the next step, we need to put file into directory because we will use that file as attachment later. Method that we use is function.file_put_contents

Select All -> Codes will be copited to clipboard


        <?php header('Content-Type: application/json');
                $stringData = $_POST["dataString"];
                require_once "vendor/autoload.php";
                error_reporting(-1);
                ini_set('display_errors', '1');
                use PHPMailer\PHPMailer\PHPMailer;
                $var1 = substr($stringData, 22);
                //$var2 = explode(',', $var1[0]);
                $stringData = base64_decode($var1);
                file_put_contents('/home/hellyeah/image1.png', $stringData);
                $mail = new PHPMailer(true);
                // the true param means it will throw exceptions on errors,
                which we need to catch $mail->IsSMTP();
                // telling the class to use SMTP try {
                $mail->Host       = "mail.gmail.com";
                // SMTP server
                $mail->SMTPDebug  = 2;
                // enables SMTP debug information (for testing)
                $mail->SMTPAuth   = true;
                // enable SMTP authentication
                $mail->SMTPSecure = "ssl";
                // sets the prefix to the servier
                $mail->Host       = "smtp.gmail.com";
                // sets GMAIL as the SMTP server
                $mail->Port       = 465;   // set the SMTP port for the GMAIL server
                $mail->SMTPKeepAlive = true;
                $mail->Mailer = "smtp";
                $mail->Username   = "...@gmail.com";
                // GMAIL username
                $mail->Password   = "...";
                // GMAIL password
                $mail->AddAddress('...@gmail.com', 'abc');
                $mail->addAttachment('.../image1.png');
                $mail->SetFrom('....@gmail.com', 'def');
                $mail->Subject = 'Ek';
                $mail->AltBody = '';
                $mail->MsgHTML("Ek");
                $mail->Send();
                echo "Message Sent OK \n";
                //header("location: ../test.html");
             } catch (phpmailerException $e) {
                echo $e->errorMessage();
                //Pretty error messages from PHPMailer
             } catch (Exception $e) {
                 echo $e->getMessage();
                 //Boring error messages from anything else!
        }?>

xcode-node