Learn how to convert email to image in javascript

Today, the Internet is a hotbed of spam and hackers, and you should try to secure your email address as soon as possible. Hackers often scan websites and web pages to extract the original email addresses and start sending spam messages to these Users do. Filling your inbox with spam messages is not only annoying but also puts you at risk for malware. Because many of these spam emails contain potential malware. When you open your email or click on the link that contains it, the malware will automatically load into your system. That email collection bots have found it. After that, they will start filling your inbox with spam emails.

Fortunately, there are ways to avoid this problem. One of these solutions is to display your email address as an image instead of text. In this post, we will introduce a simple way to do this.

Here we want to convert an email address into a graphical element and display it. One way to do this is to use Canvas. The canvas tag is used to draw graphic objects and we can also use it to draw texts.

You can click on this link for the final result's demo.

1. The first step

First, we put the following HTML command where we want the email to be displayed.

<canvas id="emailCanvas">Your browser does not support Convos</canvas>

If a browser does not support canvas, the error message we have specified will be displayed.

2. The second step

In this step, we need to enter the following javascript commands.

var canvas = document.getElementById("emailCanvas"); 
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial"; 
ctx.fillText("example@email.com", 10, 50); 

3. The third step

To make the canvas length and width equal to the text length and width, we will change the javascript command as follows.

var canvas = document.getElementById("emailCanvas"); 
var ctx = canvas.getContext("2d");
    
//Set canvas width and height
const x = canvas.width / 2;
const h = canvas.height/ 2;

ctx.font = "30px Arial";
ctx.textAlign = 'center'; //align canvas text center

ctx.fillText("example@email.com", x, h); 

By executing the above commands, you will see that the email address will be displayed as an image and it is not possible to copy it. If you want to specify the colour of the text, you can use the following command.

ctx.fillStyle = '#3477eb';

You can check the demo here.

To convert all emails on the page to a graphic element

1. The first step

We're going to put all the emails that are going to be displayed on the site into a tag with the "emailContainer" class, which is hidden by default.

.emailContainer{
     font-family: "Times New Roman", Times, serif;
     font-size: 30px;
     color: #4287f5;
     padding:5px 0;          
}
.hideEmailContainer{
     display: none;
}

2. The second step

Once we have specified the desired styles for the email text holder tag, we will have the following HTML commands. Note that each email holder tag has its own canvas tag.

<p>
   <span class="emailContainer hideEmailContainer"
         data-emailCanvas="first_email_canvas">
         first.example@email.com
   </span>

   <canvas id="first_email_canvas">
         Your browser does not support canvas 
   </canvas>
</p>

<p>
   <span class="emailContainer hideEmailContainer"
         data-emailCanvas="second_email_canvas">
         second.example@email.com
   </span>

   <canvas id="second_email_canvas">
         Your browser does not support canvas 
   </canvas>
</p>

3. The third step

Now it's time to write javascript commands.

var   emailContainers=document.getElementsByClassName('emailContainer');
for(var i = 0; i < emailContainers.length; i++)
{
   //display the email text
   emailContainers[i].classList.remove('hideEmailContainer');

   var canvasId=emailContainers[i].getAttribute("data-emailCanvas");
   var text=emailContainers[i].innerHTML;

   var canvas = document.getElementById(canvasId);
   var ctx = canvas.getContext("2d");
   canvas.width = width;
   canvas.height = height;

   //Set canvas width and height
   const x = canvas.width / 2;
   const h = canvas.height/ 2;

   ctx.font = "30px Arial";
   ctx.textAlign = 'center'; //align canvas text center

   ctx.fillText(text, x, h);

   //remove the email text
   emailContainers[i].classList.remove('hideEmailContainer');
   emailContainers[i].innerHTML="";
}

We need to create a canvas for each emailContainer tag. Then take all the emailContainer tags and change them from display: none to display: inline-block, and after converting the text inside them into a graphic element, hide them again, and finally delete the text of the email address. 

4. The fourth step

To make the canvas graphic text have the same style properties that we specified for the emailContainer tags, we can use the following commands.

var   emailContainers=document.getElementsByClassName('emailContainer');
for(var i = 0; i < emailContainers.length; i++)
{
   //display the email text
   emailContainers[i].classList.remove('hideEmailContainer');

   var canvasId=emailContainers[i].getAttribute("data-emailCanvas");
   var text=emailContainers[i].innerHTML;

   //Get email text style so that canvas can have the same style
   var fontColor = window.getComputedStyle(emailContainers[i], null)
                   .getPropertyValue('color');
   var font = window.getComputedStyle(emailContainers[i], null)
              .getPropertyValue('font');
   var width=emailContainers[i].offsetWidth;
   var height=emailContainers[i].offsetHeight;

   var canvas = document.getElementById(canvasId);
   var ctx = canvas.getContext("2d");
   canvas.width = width;
   canvas.height = height;

   var x = canvas.width / 2;
   var h = canvas.height / 2;

   ctx.font = font;
   ctx.textAlign = "center";
   ctx.fillStyle = fontColor;

   ctx.fillText(text, x, h);

   //remove the email text
   emailContainers[i].classList.remove('hideEmailContainer');
   emailContainers[i].innerHTML="";
}

5. The fifth step

Our final code will be as follows

<!DOCTYPE html>
<html>
 <head>
   <title>Convert email text to photo</title>

   <style>
    .emailContainer{
       font-family: "Times New Roman", Times, serif;
       font-size: 30px;
       color: #4287f5;
       padding:5px 0;         
    }
    .hideEmailContainer{
       display: none;
    }
   </style>
 </head>
<body>
	<p>
      <span class="emailContainer hideEmailContainer"
            data-emailCanvas="first_email_canvas">
            first.example@email.com
      </span>

      <canvas id="first_email_canvas">
          Your browser does not support canvas 
      </canvas>
     </p>

     <p>
          <span class="emailContainer hideEmailContainer"
                data-emailCanvas="second_email_canvas">
                second.example@email.com
          </span>

          <canvas id="second_email_canvas">
               Your browser does not support canvas 
          </canvas>
     </p>

  <script>    
     var 	 emailContainers=document.getElementsByClassName('emailContainer');
     for(var i = 0; i < emailContainers.length; i++)
     {
         //display the email text
         emailContainers[i].classList.remove('hideEmailContainer');

         var canvasId=emailContainers[i].getAttribute("data-emailCanvas");
         var text=emailContainers[i].innerHTML;

         //Get email text style so that canvas can have the same style
         var fontColor = window.getComputedStyle(emailContainers[i], null)
                         .getPropertyValue('color');
         var font = window.getComputedStyle(emailContainers[i], null)
                    .getPropertyValue('font');
         var width=emailContainers[i].offsetWidth;
         var height=emailContainers[i].offsetHeight;

         var canvas = document.getElementById(canvasId);
         var ctx = canvas.getContext("2d");
         canvas.width = width;
         canvas.height = height;

         var x = canvas.width / 2;
         var h = canvas.height / 2;

         ctx.font = font;
         ctx.textAlign = "center";
         ctx.fillStyle = fontColor;

         ctx.fillText(text, x, h);

         //remove the email text
         emailContainers[i].classList.remove('hideEmailContainer');
         emailContainers[i].innerHTML="";
     }
  </script>

</body>
</html>

You can check the demo here.