jQuery Plugin To Hide Email From Spam Bots - Canvas Mail

Canvas Mail is a jQuery plugin that renders your Email addresses & links on Html5 canvas elements to hide them from spam bots & web crawlers.

How it works:

• Capture style from the selected element
• Create canvas with email, attempting to render style as best as possible
• Clear the element, and insert the canvas into it
• If element is an anchor, insert mouseover javascript that sets href on mouseover

See also:

• jQuery Plugin To Mask Email Addresses On Your Website - Mail Mask

How to use it:

1. Include the latest version of jQuery library and the jQuery Canvas Mail plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="canvas-mail.min.js"></script>

2. Create an empty element you wish to render the email address in.

<span class="canvas-mail"></span>

3. Just call canvas_mail(username, domain) on the span element and done.

$(".canvas-mail").canvas_mail("admin", "jqueryscript.net");

4. If any of the selected elements are an anchor, then canvas mail will also add a mouseover event to create a mailto link only on mouseover. You can optionally add a third argument that's an object with optional fields subject, body, cc_users, cc_domains, bcc_users, bcc_domains for various fields in the mailto, e.g. canvas_mail(username, domain, {subject: "subject"}). In addition, the function link_mail can be called instead to only generate the mouseover link, without rendering the canvas.

$(".canvas-mail").canvas_mail("admin", "jqueryscript.net"), {
subject: "This is the subject!",
body: "This is a short body...",
cc_users: ["user1", "usera"],
cc_domains: ["one.org", "aaa.edu"],
bcc_users: ["shhhh"],
bcc_domains: ["jqueryscript.net"]
});

---

This awesome jQuery plugin is developed by erikbrinkman. For more Advanced Usages, please check the demo page or visit the official website.