Save a screenshot of a div to my ftp using Javascript/Jquery - javascript

I'm trying to create a screenshot using javascript of a div element which contains a embed swf. This screenshot should be saved to my FTP server.
The html does look like the following:
<div class="thumbnail" id="thumbnail">
<div style="background: #FFF url('assets/images/canvas.png') repeat;" id="builder" class="thumb">
<object>
<embed width="100%" height="350" src="http://assets.zwinky.com/assets3/avatar/avatar10.8.swf?u=dane" wmode="transparent"></embed>
<param name="wmode" value="transparent">
</object>
</div>
</div>
And my current Javascript does look like the following:
<script type="text/javascript" src="assets/js/FileSaver.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#submit_form").click(function() {
html2canvas($("#thumbnail"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
canvas.toBlob(function(blob) {
saveAs(blob, "test.png");
});
}
});
});
});
</script>
But sadly nothing will save or happen once I'm clicking the button.
Example of working code: http://jsfiddle.net/6FZkk/1/
Screenshot of the HTML element containing the embed: https://gyazo.com/37683328b5a785e6b17f78eca5e1c2de
Does anyone have a idea what im doing wrong?

Due to security restrictions the browser won't allow you to do this on a webpage. Otherwise you could do stuff like checking which links a user had visited which would allow to detect the browser history of a user.
On the other hand if your coding a chrome extension you can check tabCapture https://developer.chrome.com/extensions/tabs#method-captureVisibleTab
And flash should allow you to do this as well, but I am not familiar.
If you want to do this for testing purposes, check Phantom CSS https://github.com/Huddle/PhantomCSS

You should not do this only with js, because in this case your ftp credential will be open to public.
To do this, let you create a page like upload_to_ftp.ext, etc on the server which will accept your file and will upload to your ftp. And after getting the screenshot on the browser, send that file(screenshot) to your server(upload_to_ftp.ext).

Related

Display pdf file downloaded from database in an embed tag

We are trying to fetch pdf files from database in byte array format. when user clicks on display button it should be displayed in an embed tag which appears on top of screen. But when we convert the byte array to base64string it doesn't apear in embed file.
<td>
#Html.DisplayFor(modelItem => item.File)
Display
</td>
When user press Display button, OpenPDF script will open:
<script type="text/javascript">
function OpenPDF() {
document.getElementById("pdfBack").style.visibility = "visible";
document.getElementById("pdfDialog").style.visibility = "visible";
document.getElementById("pdfFile").setAttribute("src", "data:application/pdf;base64," + #Convert.ToBase64String(item.File));
}
</script>
And this is the embed tag:
<embed id="pdfFile" type="application/pdf" src="" width="100%" height="100%" />
It doesn't work! embed tag will open after pressing button, but there is no pdf file inside the mebed.
Please help us how should we handle this problem
To display a PDF properly directly on the browser you need to use some kind of PDF viewer ie google docs or you can use libraries like PDF.js.
Using google doc ->
<iframe src=" http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" ></iframe>
For this to work you need to host your PDF's somewhere online.
You can also use PDF.js http://mozilla.github.io/pdf.js/examples/
check examples to make it work for you.
To make embed solution work you will need to host your file some where already and provide that path in your src.
<script type="text/javascript">
function OpenPDF() {
document.getElementById("pdfBack").style.visibility = "visible";
document.getElementById("pdfDialog").style.visibility = "visible";
document.getElementById("pdfFile").setAttribute("src", "http://yourwebsite.com/" + fileName );
}
</script>
<embed src="" width="500" height="375"
type="application/pdf">
I would suggest to use PDF.js if hosting the file is a problem.
Also chrome on android doesn't support embeds with PDF files so if you are expecting android users use PDF.js or google docs.

How to add a PHP page into blogspot.com new page

I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5. I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.
https://tranbongda.blogspot.com/p/function-myfunction-window.html
I used the code like this:
<script>
var Window;
// Function that open the new Window
function windowOpen() {
Window = window.open("http://hiteachers.com/soccer_parse.php?id=5",
"_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose() {
Window.close();
}
</script>
<button onclick="windowOpen()">Open page</button>
<button onclick="windowClose()">Close page</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function(){
$("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
});
});
</script>
My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page (https://tranbongda.blogspot.com/p/function-myfunction-window.html) without clicking on any button.
I have thought of creating iframe by using this:
<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>
But the blogger.com page does not accept it, and returns the error message like this:
This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.
Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.
Some other bloggers suggested to use AJAX, which is very new to me.
So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?
Can you help me please?
Thanks
As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something.
AJAX is accomplished by using the XMLHttpRequest object.
Mozilla's spec provides links and stuff which will show you how to use it
and w3schools is a good resource.
Then it's all comes down to editing the page directly
element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);

PDF Reader not installed on browser - Wish to Auto download

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="gistfile1.js"></script>
</head>
<body>
<p id="divPDF">Can't see the PDF?</p>
</body>
<script type="text/javascript">
var info = getAcrobatInfo();
if (info.acrobat == false){
window.location = "empty.pdf";
} else {
document.getElementById("divPDF").innerHTML = "<object data='empty.pdf' type='application/pdf' width='100%' height='100%'><p class='helpContent'>Can't see the PDF? Try <a href='empty.pdf' download='empty.pdf'>downloading the file</a>. If you're still having trouble, <a href='/contactUs.jsp'>contact us</a> or email us directly at <a href='mailto:support#guitarinstructor.com'>support#guitarinstructor.com</a>.</p></object>";
}
</script>
</html>
Here's what I'm looking at doing. IF the getAcrobatInfo TRUE, display the PDF.
If the getAcrobat returns FALSE, then automatically download the PDF.
I thought this would work on a window.location = "URL OF THE PDF", my browser still attempts to display it.
Is there any javascript or jQuery that I can implement that will allow me to force an auto download if the user's browser doesn't have a PDF Reader plugin?
Typically you must set the Content-disposition header to attachment to encourage a browser to download a file instead of displaying it. If you can do this, and your client side plugin detection works, you could edit your server side code to have a different URL depending on the disposition you want to send, and have that in your object src attribute or location.replace argument.
Additionally, in HTML5 there is a download attribute for the <a> tag, with an optional filename as the attribute value. Support for this is not in every browser.
Download
Note that a very common practice is to have a single link with a small blurb informing a user how to download a file (e.g. using the right mouse button).

How to preload a web page using external preloader?

I have a simple HTML page that has a large image as a full screen background; I called this page index2.html.
I want to create another page called index.html which will preload index2.html fully, and then direct the user to it. However, all the preloader solutions that I've found on internet are based on a single HTML page.
How can I accomplish this? Any help would be appreciated.
You can cause the browser to cache the image by loading it on index.html as a 1 pixel image
<img src="/index2-background-image.jpg" alt="" width="1" height="1" />
Alternatively you could load the content from index2.html using jQuery like so:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
});
</script>
<div id="index2content"></div>

Show image while page is loading

My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>

Categories

Resources