HTML5 Canvas Example Screenshots - javascript

I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.

If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

A live view of an external website

How do you get a div that is populated with a live screen image of an external website without using iFrames? e.g. www.google.com
I want to produce a portfolio website, I have a number of sites that are regularly updated. What I want to do is have javascript open on page load, I want it to find a specific external site (e.g. www.google.com) and then take a screenshot. Then I want it to display the screenshot on my portfolio page. Or show a live view of the website inside a div. I dont want to use iFrames as I feel it just looks out of place. I don't need the JS to save the screenshot, just to display it.

how to get a list src from img tag?

I'm building a webapp using sencha touch, and I need to use some images from another website. These images are updated every 10 minutes, so the source of the images is changing all the time. So I don't have an specific url where to get the images.
Can anyone suggest a way to get the source of the images using javascript?
I tried with jsonp, but got nothing more than an error.
I will appreciate your suggestions.
There is two javascript solutions:
Ajax request to the website API
Load the page into an hidden iframe, onload, fire the update of the image, search for the source image you want in the iframe childrens, then delete the DOM of the iframe

Get data from one website and show it in another website

Our client has two websites and they share one common section, he wants us to pick data on the fly from one website and display it as it is in the other website, excluding the header and footer. I tried using an iframe but the page contains Flash and it does not show the Flash content in the child website. Using an iframe I was able to show the entire website (Flash didn't load) but I don't want the header and footer.
Any help would be appreciated.
Note : We don't have database or code access to the parent web site from where we are picking the data.
didn't quite understand your Note..
Considering you can add some code to both sites and you want to show only part of the site -
assume you have siteA and siteB here is a simple solution:
siteA can open an iframe that hosts siteB with a url param like ?sendSiteA=true
in the js of siteB, when parsing this param you will have a function that will grab section that you want to show, append it to the body and hide everything else.
this is not the best way to share data, but it will work.
P.S. you can pass the dimensions of the iframe in another url param and adjust the dimentions of rht section in siteB

Displaying a page preview and manipulate it in another site

I'd like to show the user a small preview of another page (from a different domain) and let him control the page's elements. For example: replace the logo on the top.
I tried two approaches:
Using an iFrame causes me cross domain issues.
I can't "preinstall" javascript functions on that page either.
Would love to get more ideas.
Thanks!
You can refer to http://jsbin.com/
The output div has a iframe where your page cloned from other domain.
On the other hand you should have your admin interface where user changes anything change the HTML of the iframe content (as it is a clone not directly from other domain browser allows you to modify). So a live preview can be shown to user.
Here, for how to change the iframe HTML u have many examples otherwise refer to the jsbin.com code.
I just came across this article. This might help you. http://www.sitepoint.com/how-to-safeguard-your-site-with-html5-sandbox/

Categories