آموزش تبدیل ایمیل به تصویر در javascript

امروزه اینترنت کانون اسپم ها و هکر ها است و شما باید هرچه زودتر برای ایمن سازی آدرس ایمیل خود اقدام کنید.هکرها اغلب وب سایت ها و صفحات وب را برای استخراج آدرس های ایمیل اصلی اسکن می کنند و شروع به ارسال پیام های اسپم به این کاربران میکنن. پر شدن صندوق ورودی ایمیل توسط پیام های اسپم نه تنها موضوعی آزار دهنده است بلکه شما را در معرض خطر بدافزار ها نیز قرار میدهد. زیرا بسیاری از این ایمیل های اسپم حاوی بدافزارهای بالقوه هستند. وقتی نامه خود را باز می کنید یا روی پیوند حاوی آن کلیک می کنید ، بدافزار به طور خودکار در سیستم شما بارگیری می شود.فرض کنید آدرس ایمیل خود را در صفحه تماس با ما وب سایت خود وارد کرده اید ، پس این احتمال وجود دارد که ربات های جمع آوری کننده ایمیل آن را پیدا کرده باشند. پس از آن ، آنها شروع به پر کردن صندوق پستی شما با ایمیل های هرزنامه می کنند.

خوشبختانه راه هایی برای جلوگیری از این مشکل وجود دارد. یکی از این راه حل ها آن است که آدرس ایمیل خود را بجای آنکه به صورت متنی نمایش بدهید, آن را به صورت یکی تصویر نمایش دهید. در این پست یک روش ساده را برای این کار معرفی خواهیم کرد.

ما در اینجا میخواهیم که یک آدرس ایمیل را به یک عنصر گرافیکی تبدیل کرده و نمایش بدهیم. یکی از راه هایی که برای این کار وجود دارد استفاده از Canvas است. از تگ canvas برای رسم اشیاء گرافیکی استفاده میشود و ما میتوانیم از آن برای رسم متون نیز استفاده کنیم.

برای مشاهده نتیجه نهایی میتوانید به  این لینک مراجعه کنید.

1. مرحله اول:

ابتدا دستور HTML زیر را در جایی که میخواهیم ایمیل به نمایش در آید قرار میدهیم.

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

درصورتی که یک مرورگر از canvas پشتیبانی نکند پیام خطایی که مشخص کرده ایم نمایش داده میشود.

2. مرحله دوم

دراین مرحله لازم است که دستورات javascript زیر را وارد کنیم.

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

3. مرحله سوم 

برای آنکه اندازه طول و عرض canvas با طول و عرض متن برابر باشد, دستور javascript را به صورت زیر تغییر خواهیم داد.

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); 

با اجرای دستورات فوق مشاهده خواهید کرد که آدرس ایمیل به صورت یک تصویر نمایش داده خواهد شد و امکان کپی کردن آن وجود ندارد. اگر بخواهید رنگ متن را هم مشخص کنید میتوانید از دستور زیر استفاده کنید.

ctx.fillStyle = '#3477eb';

برای مشاهده دمو میتوانید روی این لینک کلیک کنید

برای تبدیل تمام ایمیل های موجود در صفحه به عنصر گرافیکی

1. مرحله اول

ما قصد داریم تمام ایمل هایی که قرار است در سایت نمایش داده شوند را داخل تگی با کلاس "emailContainer" قرار دهیم که این تگ بطور پیش فرض پنهان است.

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

2.مرحله دوم

بعد از آن که استایل های موردنظر را برای تگ نگه دارنده متن ایمیل مشخص کردیم, دستورات HTML زیر را خواهیم داشت. توجه کنید که هر تگ نگه دارنده ایمیل داری یک تگ canvas مخصوص به خود است.

<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. مرحله سوم

حال نوبت به نوشتن دستورات javascript میرسد.

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="";
}

لازم است که ما برای هر تگ emailContainer یک canvas ایجاد کنیم. پس تمام تگ های emailContainer را گرفته و آنها را از حالت display:none به حالت display:inline-block در آورده و پس از آنکه متن داخل آنها را به عنصر گرافیکی تبدیل کردیم مجددا آنها را پنهان میکنیم و درنهایت متن آدرس ایمیل را ازبین میبریم.

4. مرحله چهارم

برای آنکه متن گرافیکی canvas همان ویژگی های style که برای تگ های emailContainer مشخص کرده بودیم داشته باشد میتوانیم از دستورات زیر استفاده کنیم.

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. مرحله پنجم

کد نهایی ما به صورت زیر خواهد بود.

<!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>

برای مشاهده دمو میتوانید روی این لینک کلیک کنید.