generating a screenshot of a website using jquery
If you look at wkhtmltox, there's native lib/app for converting a webpage to an image.
<?php // file: img.php
$img=render_image($_GET['url']);
?>
<!-- Your Website -->
<img alt='ldr'/>
<script type="text/javascript">
$(document).ready(function(){
var url='http://google.com/';
$('#img').attr('src','img.php?url='+encodeURIComponent(url));
});
</script>
In case the comment wasn't clear enough, you need PHP somewhere which could run a native program.
Generate and Download Screenshot of webpage without lossing the styles
You can achieve this using the following JavaScript libraries ...
- html2canvas ( for taking screenshot of webpage )
- FileSave.js ( for downloading the screenshot as an image )
ᴅᴇᴍᴏ
(function(exports) { function urlsToAbsolute(nodeList) { if (!nodeList.length) { return []; } var attrName = 'href'; if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) { attrName = 'src'; } nodeList = [].map.call(nodeList, function(el, i) { var attr = el.getAttribute(attrName); if (!attr) { return; } var absURL = /^(https?|data):/i.test(attr); if (absURL) { return el; } else { return el; } }); return nodeList; }
function screenshotPage() { var wrapper = document.getElementById('wrapper'); html2canvas(wrapper, { onrendered: function(canvas) { canvas.toBlob(function(blob) { saveAs(blob, 'myScreenshot.png'); }); } }); }
function addOnPageLoad_() { window.addEventListener('DOMContentLoaded', function(e) { var scrollX = document.documentElement.dataset.scrollX || 0; var scrollY = document.documentElement.dataset.scrollY || 0; window.scrollTo(scrollX, scrollY); }); }
function generate() { screenshotPage(); } exports.screenshotPage = screenshotPage; exports.generate = generate;})(window);
@import url(https://fonts.googleapis.com/css?family=Merriweather);$red: #e74c3c;*,*:before,*:after { @include box-sizing(border-box);}
html,body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em;}
h1 { text-align: center; color: #a8a8a8; @include text-shadow(1px 1px 0 rgba(white, 1));}
form { border: 2px solid blue; margin: 20px auto; max-width: 600px; padding: 5px; text-align: center;}
input,textarea { border: 0; outline: 0; padding: 1em; @include border-radius(8px); display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; @include box-shadow(0 1px 1px rgba(black, 0.1)); resize: none; &:focus { @include box-shadow(0 0px 2px rgba($red, 1)!important); }}
#input-submit { color: white; background: $red; cursor: pointer; &:hover { @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6)); }}
textarea { height: 126px;}
}.half { float: left; width: 48%; margin-bottom: 1em;}.right { width: 50%;}.left { margin-right: 2%;}@media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; }}
/* Clearfix */.cf:before,.cf:after { content: " "; /* 1 */ display: table; /* 2 */}.cf:after { clear: both;}.half.left.cf > input { margin: 5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script><div id="wrapper"> <h1>Scrrenshot</h1> <form class="cf"> <div class="half left cf"> <input type="text" id="input-name" placeholder="Name"> <input type="email" id="input-email" placeholder="Email address"> <input type="text" id="input-subject" placeholder="Subject"> </div> <div class="half right cf"> <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea> </div> <input type="submit" value="Submit" id="input-submit"> </form></div><a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
how to capture screenshot in html using js or jquery
Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...
For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.
You should try url2png
How to take screenshot of a div with JavaScript?
No, I don't know of a way to 'screenshot' an element, but what you could do, is draw the quiz results into a canvas element, then use the HTMLCanvasElement
object's toDataURL
function to get a data:
URI with the image's contents.
When the quiz is finished, do this:
var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */
When the user clicks "Capture", do this:
window.open('', document.getElementById('the_canvas_element_id').toDataURL());
This will open a new tab or window with the 'screenshot', allowing the user to save it. There is no way to invoke a 'save as' dialog of sorts, so this is the best you can do in my opinion.
Creating a screenshot image of a website if given nothing other than a url?
Yes, you can, please read the following stackoverflow questions:
generating-a-screenshot-of-a-website-using-jquery
website-screenshots-using-php
There are some tools with the goal of snapshotting the website to an image, so, using Jquery in conjunction with PHP you can achieve your goal!
Related Topics
Why Session Object Destruction Failed
Round to Max Thousand, Hundred etc in PHP
How to Set 777 Permission on a Particular Folder
Cast the Current Object ($This) to a Descendent Class
Trying to Access Array Offset on Value of Type Null
Fatal Error: Call to Undefined Method MySQLi_Result::Fetch_All()
PHP Simplexml Attributes Are Missing
Bad Request. Connecting to Sites via Curl on Host and System
(Mysql, PHP) How to Get Auto_Increment Field Value Before Inserting Data
How to Add Dynamic Dropdown List Column on Laravel 5.3 Registration
How to Create an Empty Array in PHP with Predefined Size
PHP Crop Image to Fix Width and Height Without Losing Dimension Ratio