https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.js<\/a> and save it to the js files folder of our project like we have a js-files folder here. After saving the project in the js-files directory, we need to include it to our HTML file in order to get the screenshot.<\/p>\nBelow is the HTML of the form<\/strong><\/p>\n![\"form1\"\/](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/form1.png\")
<\/p>\n
<head>
\n\t<script src=\"js-files\/html2canvas.js\" type=\"text\/javascript\"><\/script>
\n<script src=\"js-files\/screenshot_save_submit.js\" type=\"text\/javascript\"><\/script>
\n<\/head>
\n<body>
\n\t<div class='form_outer_div'>
\n<form onsubmit=\"return submit_after_screenshot();\" method=\"POST\" id=\"contact_ad_form\">
\n<input type=\"hidden\" id=\"screenshot_image\" name=\"screenshot_image\">
\n\t\t<div class=\"form-group\">
\n\t\t\t<label>Field 1<\/label>
\n\t\t\t<input type=\"text\" name=\"field_1\" class=\"pix_text\">
\n\t\t<\/div>
\n\t\t<div class=\"form-group\">
\n\t\t\t<label>Field 2<\/label>
\n\t\t\t<input type=\"text\" name=\"field_2\" class=\"pix_text\">
\n\t\t<\/div>
\n\t\t<span class=\"send_btn\">
\n\t\t\t<button type=\"submit\" class=\"submit_btn\" id=\"submit_ad_form\">
\n\t\t\t\t<span class=\"editContent\" style=\"\">Submit<\/span>
\n\t\t\t<\/button>
\n<\/span>
\n\t\t<span class=\"send_btn\">
\n\t\t\tClick on the submit button to get the screenshot on right...
\n\t\t<\/span>
\n<\/form>
\n <\/div>
\n<div class=\"ten columns omega\">
\n<div id=\"screenshot\"><\/div>\t\/**Div to show the screenshot**\/
\n\t<\/div>
\n<\/body><\/code><\/p>\nHere, the file screenshot_save_submit.js (included in the header), is the file that we have created to add our script that will capture the screenshot and submit the form.
\nThen we created a form with id \u2018contact_ad_form\u2019 having 2 fields.<\/p>\n
Now, on submit of this form, we need to first get the screenshot and then show it to the right before sending it to the back-end for email purposes. Therefore we will add a function to the screenshot_save_submit.js file and will call this function on the \u201consubmit\u201d event of the above form.<\/p>\n
Below is the script for screenshot_save_submit.js<\/strong>
\nfunction submit_after_screenshot(){
\n\thtml2canvas(document.getElementById('form_outer_div'),{
\n\t\tbackground :'#000000',
\n\t}).then(canvas => {
\n\t\tvar imageData = canvas.toDataURL();
\n\t\tdocument.getElementById('screenshot').appendChild(canvas);
\n\t\tdocument.getElementById(\"screenshot_image\").setAttribute(\"value\", imageData);
\n\t\t$.ajax({
\n\t\t\ttype: 'POST',
\n\t\t\turl: 'contact_form_submit.php',
\n\t\t\tdata: $( \"#contact_ad_form\" ).serialize(),
\n\t\t\tsuccess: function (result) {
\n\t\t\t\tconsole.log('Form submitted');
\n\t\t\t},
\n\t\t\terror: function (result) {
\n\t\t\t\tconsole.log('Error Result --- '+JSON.stringify(result));
\n\t\t\t}
\n\t\t});
\n\t});
\n\treturn false;
\n}<\/em><\/code><\/p>\nHere, in this function, we are calling the html2canvas() method of the html2canvas javascript library. document.getElementById(‘form_outer_div’) is fetching the div with id ‘form_outer_div’ which we are going to capture for a screenshot. In the second argument of the function, we are specifying the background color of the image to black. We can add more properties to the second argument to make the screenshot more specific like;
\n{
\n\tbackground : \u2018#000000\u2019,
\n\theight: 300,
\n\twidth: 500
\n}<\/em>
\nwe can specify height, width, and many more properties in a similar way.<\/p>\nIn form_submit.php<\/strong><\/p>\n
\n<?php
\n$field_1 = $_POST['field_1'];
\n\t$field_2 = $_POST['field_2'];
\n\/******MAIL FORMATION*********\/
\n\t$headers = \"MIME-Version: 1.0\\r\\n\";
\n\t$headers .= \"Content-Type: text\/html; charset=ISO-8859-1\\r\\n\";
\n\t$message = '<html><body>';
\n\t$message .= '<h3>Here are your form entries:<\/h3>';
\n\t$message .= '<table border=\"0\">';
\n\t$message .= '<tr><th>Field 1<\/th><td>'.$field_1.'<\/td><\/tr>';
\n\t$message .= '<tr><th>Field 2<\/th><td>'.$field_2.'<\/td><\/tr><\/table>';
\n\t$file = md5(uniqid()) . '.png';\t\/\/creating unique filename for screenshot
\n\tif(isset($_POST['screenshot_image']))
\n\t{
\n\t\t$data = $_POST['screenshot_image'];
\n\t\t$uri = substr($data,strpos($data,\",\")+1);
\n\t\t\/*****adding images to \/images\/screenshots folder in order to retrieve later*****\/
\n\t\tfile_put_contents('.\/images\/screenshots\/'.$file,base64_decode($uri));
\n\t\t\/********attaching screenshot to mail body****************\/
\n\t\t$message .= '<br\/><img src=\"cid:logo_2u\" style=\"max-width:800px\"\/>';\t\t\t}<\/p>\n\t$message .= '<\/body><\/html>';
\n\t\/*****************include your php mailer path***************\/
\n\trequire(getcwd().\"\/pix_mail\/phpmailer\/PHPMailer.php\");
\n\trequire(getcwd().\"\/pix_mail\/phpmailer\/SMTP.php\");
\n\t$mail = new PHPMailer\\PHPMailer\\PHPMailer();
\n\t$mail->setFrom('info_admin@gmail.com', 'Info');
\n\t$mail->addAddress(\u2018admin_email@gmail.com', 'Admin');
\n\t$mail->Subject = 'Form Submission';
\n\t$mail->Body = $message;
\n\t$mail->AddEmbeddedImage(getcwd().'\/images\/screenshots\/'.$file, 'logo_2u');
\n\t$mail->isHTML(true);
\n\tif(!$mail->send()) {
\n\t error_log( 'Message was not sent.',0);
\n\t error_log('Mailer error: ' . $mail->ErrorInfo,0);
\n\t} else {
\n\t error_log('Message has been sent.',0);
\n\t}
\n\treturn true;
\n?><\/code><\/p>\n
Here, we are fetching the field values then creating the HTML for the email and embedding the captured screenshot to the email.
\nThe below image is showing the actual form on the left side which was submitted to capture the screenshot and showing the captured screenshot on the right side. <\/p>\n
![\"form2\"\/](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/form2.png\")
<\/p>\n
The below image is showing the email received containing the form data and the attached screenshot that can be downloaded and added to drive.<\/p>\n
![\"form3\"](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/form3.png\")
<\/p>\n
A Windows 10 certification can help you prove your skills in the Microsoft Windows 10 operating system and it can improve your chances of getting hired. StudySection offers a Windows 10 certification exam<\/a> for beginner level as well as professional level individuals in the Microsoft Windows 10 operating system.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Introduction Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or<\/p>\n","protected":false},"author":1,"featured_media":3236,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[199,200],"acf":[],"yoast_head":"\n
Take a screenshot of a webpage through Javascript and PHP<\/title>\n<meta name=\"description\" content=\"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Take a screenshot of a webpage through Javascript and PHP\" \/>\n<meta property=\"og:description\" content=\"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-07T04:44:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-07T07:18:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/php-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Take a screenshot of a webpage through Javascript and PHP\",\"datePublished\":\"2020-09-07T04:44:06+00:00\",\"dateModified\":\"2020-09-07T07:18:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\"},\"wordCount\":504,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"JavaScript\",\"php\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\",\"url\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\",\"name\":\"Take a screenshot of a webpage through Javascript and PHP\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-09-07T04:44:06+00:00\",\"dateModified\":\"2020-09-07T07:18:13+00:00\",\"description\":\"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Take a screenshot of a webpage through Javascript and PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Take a screenshot of a webpage through Javascript and PHP","description":"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/","og_locale":"en_US","og_type":"article","og_title":"Take a screenshot of a webpage through Javascript and PHP","og_description":"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.","og_url":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-09-07T04:44:06+00:00","article_modified_time":"2020-09-07T07:18:13+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/php-1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Take a screenshot of a webpage through Javascript and PHP","datePublished":"2020-09-07T04:44:06+00:00","dateModified":"2020-09-07T07:18:13+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/"},"wordCount":504,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["JavaScript","php"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/","url":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/","name":"Take a screenshot of a webpage through Javascript and PHP","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-09-07T04:44:06+00:00","dateModified":"2020-09-07T07:18:13+00:00","description":"Sometimes, we need to take a screenshot of any particular element of the document like any div, span, or might be full body.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/take-a-screenshot-of-a-webpage-through-javascript-and-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Take a screenshot of a webpage through Javascript and PHP"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":2843,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3234"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=3234"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3234\/revisions"}],"predecessor-version":[{"id":3242,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3234\/revisions\/3242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/3236"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=3234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=3234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=3234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}