How to take a snapshot of webpage from the url? - javascript

I want to take a snapshot of the webpage from the url. The url is an html web page which is dynamic. Basically we needed an img of that webpage.
I thought to convert the html page to image in c# but din't work.
I first read the html using streamreader and using NReco.ImageGenerator tried to convert into bytes and finally image. This isnt working.
Finally I am trying to convert html to canvas using javascript from inside the html web page.
function report() {
let region = document.querySelector("body");
html2canvas(
$('body'),
{allowTaint: true, logging: true,'onrendered': function (canvas)
{}}).then( //getting problem here at then
function (canvas) {
let jpgUrl = canvas.toDataURL();
console.log(jpgUrl);
var text = "bottom-right Brochure1";
var imageName = text + '.jpg';
download(jpgUrl,imageName, "image/png");
}
Code explained - It will take a snpashot of the body element in the html page using js. Take the url and create the canvas from the url. and automatically download. But i face a issue ------- " html2canvas(...),then is not a function" .. I dont know why its happening. Please help.

Because of Cross-Origin Resource Sharing (CORS) restrictions in all modern browsers, this can't be done purely on the clientside. You need something on the server-side to accomplish this. To do it in javascript on the server use NodeJS there are several npm packages that can help like: node-server-screenshot, PhantomJS etc

Related

How can I upload user-generated svg to the server?

Having spent three days researching and failing to enable user-generated svg upload to the server, I'm completely stumped.
I've built an HTML and Javascript site for users to create a basic model of a vehicle, by entering dimensions into a form.
Those dimensions are then used to edit each svgs 'x' and 'y' coordinates.
I've had success with converting the nested svg to base64 and then downloading to the users filesystem using a button (although it isn't working on JSFiddle), and also experimented with saving the file to local storage.
The output javascript has proven to work absolutely fine, but I just can't figure out how to get that output onto the server in any way.
I'd like to be able to have a user submit their edited svg to the server, where I can then reference it on another page.
I'm fairly unfamiliar with server side code and practise but so far have tried the common suggestions such as:
$.ajax({
url: ajaxurl,
type: 'POST',...
as well as various iterations of PHP code to receive the svg.
Here's the (mostly) working Fiddle of my site so far.
JSFiddle
Edit for better context
This is a very simplified version of the nested svg that I'm trying to export to server
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1">
<rect id="rect1"/>
<rect id="rect2"/>
</svg>
Export is attached to this button
<button id="downloadSVG">Download</button>
And then the export script
<script>
function downloadSVGAsText() {
const svg = document.querySelector('svg');
const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
const a = document.createElement('a');
const e = new MouseEvent('click');
a.download = 'download.svg';
a.href = 'data:image/svg+xml;base64,' + base64doc;
a.dispatchEvent(e);
}
const downloadSVG = document.querySelector('#downloadSVG');
downloadSVG.addEventListener('click', downloadSVGAsText);
</script>
Simplified JSFiddle
What I'm completely lost about is how to post the nested svg to the server, so that users can edit or use it later.
So far I understand that I will need Ajax to pass the Base64 image from javascript to PHP file on the server, then the PHP file will place the image on to the server. I just don't seem to be able to make it work. The main issue is how to get the generated Base64 to PHP. The rest I'm happy to work out.
This is a very general question. I think using AJAX is a good way to go. You should be able to just put the SVG in a POST body:
$.ajax('url',{
'data': svg.outerHTML,
'type': 'POST',
'processData': false,
'contentType': 'image/svg+xml'
});
Then use $svgString = file_get_contents('php://input'); to get the contents of the body, this saves you a lot of encoding and decoding. The rest is up to you.

save web page source javascript

I want to save the source website by javascript and send them via socket, but I have a problem. Written string is badly formatted. Everything is in one line, so that javascript does not work.
I tried:
var html = document.documentElement.outerHTML; //document.outerHTML
var html = new XMLSerializer().serializeToString(document.documentElement);
var html = new XMLSerializer().serializeToString(document);
And I tried to encode to base64.
How to save a web page so that later work?

Programm that tracks changes on web page

I have a web page that has several images on it and a script in it which changes picture of one random image once in some time interval. Script changes the image by rewtiting its file in the cash an updating it on the page. So url of the image picture doesnt chage in html code:
socket.on("banner", function(info) {
banName = "banner" + info.bid;
ban = document.getElementById(banName).getContext('2d');
var img = new Image();
img.src = 'data:image/jpg;base64,' + info.image;
img.onload = function(){ban.drawImage(img, 0, 0);};
});
How can I track image change using for example C#, when the page is in the browser?
As a last resort, retrieve the image periodically and load it into a byte array. Checking changes is just a matter of checking if the byte array has changed.
edit:
It seems the hard part is about how can one retrieve the image data. Without any javascript code in the browser, use C# to establish a websocket connection to mimic the behavior of javascript.
But I think it would be easier done by modifying the javascript code in the browser.

Creating download prompt using purely javascript

I have some text data (say var a = 'Hello World From Javascript';)in javascript variable in current window. I want to do the following
through javascript-
1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.
is this all possible through javascript?
I know we can make ajax calls to server or redirect but in this case instead of following above steps. But in this case, these workarounds are not adaptable.
you can do that using JS & HTML5 features. Please find below a sample code.
var fileParts = ['Hello World From Javascript'];
// Create a blob object.
var bb = new Blob(fileParts,{type : 'text/plain'});
// Create a blob url for this.
var dnlnk = window.URL.createObjectURL(bb);
var currentLnk = $('#blobFl').attr('href');
// blobFl is the id of the anchor tag through which the download will be triggered.
$('#blobFl').attr('href',dnlnk);
$('#blobFl').attr('download','helloworld.txt');
// For some reason trigger from jquery dint work for me.
document.getElementById('blobFl').click();
Triggering a file download without any server request
Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.
Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.
Source: Triggering a file download without any server request
If you already have the file on the server (I make an ajax call to generate and save a PDF on the server) - you can do this
window.location.replace(fileUrl);
No, Content-Disposition is a response header, it has to come from the server. I think you could do it with Flash but I wouldn't recommend it.
Here's a clean, pure js version of #Rajagopalan Srinivasan's answer:
var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });
// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);
blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();
<a id="blobLink">Download</a>

Take screenshot of <body> with html2canvas and store img as JS var

I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body).
From my research, html2canvas seems to be a resource that makes this possible.
My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved.
http://html2canvas.hertzen.com/documentation.html
The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to get an image at this point.
From his code.
$(window).ready(function(){
('body').html2canvas();
var canvasRecord = new html2canvas(document.body).canvas;
//At this point does the .toDataURL method return a png?
});
At this point I am lost where the image is, or even how/when to create it. Ill worry sending it to the server later.
Any information appreciated. Thanks! (html2canvas even needed?)
As you are using the html2canvas jQuery plugin, here is a sample snippet
var screenshot;
$('body').html2canvas({
onrendered: function(canvas) {
screenshot = canvas.toDataURL();
//code to process/send the image to server
}
});
In the above code snippet the html2canvas creates the screenshot of the page.
You can also use PhantomJS to create screenshots of webpages - provided that they are public pages, because you may not be able to access login protected pages on the server-side; in such situations only a client-side solution like html2canvas will work.
$("#screenshot").click(function() {
$("body").html2canvas({
onrendered: function( canvas ) {
$(".filt_opt_n").html(canvas);
//window.open(img);
}
});
});
<div id="screenshot"></div>
.filt_opt_n this is a div which u want to show the output this is working for me
May be an old question. You could try this!
var htmlCanvas = new html2canvas(document.body);
var queue = htmlCanvas.parse();
var canvas = htmlCanvas.render(queue, { elements: { length: 1} });
var img = canvas.toDataURL();

Categories

Resources