Menu
How to create a button in webpage that opens outlook application with compose mail (new mail) option attached with that webpage's screeshot?
726
You can simply achieve this with a single html line of code.
<a href="mailto:[email protected]?subject=your title&body=TThe message">
<button id="btnOutlook">Go to Outlook</button>
</a>
This can also be exted to include other fields such as
<a href="mailto:address..?subject=subject...&body=anything...&[email protected]&[email protected]">
<button id="btnOutlook">...</button>
</a>
This is a handy method to add a link to let the user contact you without the need of any server-side programming languages.
But also note that Mailto works ONLY if the visitor has configured an email client (such as Outlook Express) on their system.
In order to attach screenshots as you require, it's advisable to seek a solution as described here.
Or the following method using Javascript and HTML5 can also be used
In the HTML file- define markup and scripting
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
function take_screenshot()
{
html2canvas(document.body, { onrendered: function(canvas)
{
var img = canvas.toDataURL()
$.post("save_screenshot.php", {data: img}, functio(file){
window.location.href = "save_screenshot.php?file="+ file
});
}
});
}
</script>
<body>
<div id="wrapper">
<div id="screenshot_div">
<button type="button" onclick="take_screenshot()">buttonText</button>
</div>
</div>
</body>
Make a PHP file to save the screenshot
<?php
if($_GET['file'])
{
$file=$_GET['file'];
if (file_exists($file))
{
header('Content-Description: File Transfer');
header('Content-Type: image/png');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
ob_clean();
flush();
readfile($file);
unlink($file);
exit;
}
}
if($_POST['data'])
{
$data = $_POST['data'];
$file = md5(uniqid()) . '.png';
$uri = substr($data,strpos($data,",")+1);
file_put_contents('./'.$file, base64_decode($uri));
echo $file;
exit();
}
?>
Since am not sure of your exact program structure, use this only as a guide. To attach the stored image, use the method to attach images, that I've mentioned above. For more info in this regard you can refer to this.
Hope this helps
122
You can use mailto link as explained below
Mailto link is a type of HTML link that activates the default mail client on the computer for sending an e-mail. The web browser requires a default e-mail client software installed on his computer in order to activate the e-mail client. If you have Microsoft Outlook, for example as your default mail client, pressing a mailto link will open a new mail window.
<a href="mailto:[email protected]">Send Mail</a>
If you want to add this to button you can try below html
<button onclick="location.href='mailto:[email protected]';">Send Mail</button>
Regarding your second requirement to take screenshot and attach it with mail, please refer below link, I think its answered
How to screenshot website in JavaScript client-side
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
