I'm trying to capture a part of web page as image, programmatically, i.e., using Javascript or JQuery. I have tried with html2canvas, but it is not working when I have swf objects and iframes.
My web page may contain swf file(Fusion charts), iframes, text, and images. I'm trying to convert all the objects into a single image. Does anyone know a possible solution, that works also on IE9?
Setup a virtual machine which reads a list of websites to capture
wget ...
every now and then
/etc/crontab
let it open an url
firefox http://....
and then take a screenshot from a second shell
import -window root /home/ftp/screenshots_<id>.jpg
then close firefox instance / shell and loop that for all your urls
This can all be put into 1 shell script and loaded into a very small virtual box,
use awesome-wm or some tiny window manager. Also import needs imagemagick.
This is the only way you can capture html and flash and iframes like rendered by the browser in an hidden automatic process.
Related
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
My issue is that I have to deploy a local server (without internet), so I cannot use Google Doc Viewer in this case. All I want is to restrict the user from download or printing the document. I have tried hiding or removing the toolbar in JS but it is not working out.
You may be able to disable the toolbar somehow, but that isn't good enough to keep users from downloading or printing it anyway, and nothing you can do will be. If a person can see something, they can copy it, no matter what you try to do to stop them (and all trying will do is inconvenience legitimate users). Previous similar questions:
How to prevent downloading images and video files from my website?
disable downloading of image from a html page
https://graphicdesign.stackexchange.com/questions/39462/is-it-possible-to-prevent-download-of-images-when-designing-a-website
Although those talk about images, the exact same reasoning applies to PDFs.
I am trying to integrate a screenshot tool or a Snipping tool kind of application inside a HTML page that I developed.
Basically the app should allow me to snipe a part of my current webpage and save it in picture format. Or it can even capture the entire page also. Anything works.
For the record, the content of my webpage contains an iframe whose source is - https://www.mathxl.com/info/exercise.aspx?fromask=yes&dataid=f919d33b-99fd-4fb5-90a8-a8a4c9894795
The Screen Capture Application should capture the dynamic contents that I insert inside the loaded iframe flash content as well.
Any kind of suggestions or information about a 3rd Party API (even paid version works) would be helpful.
PS - I tried HTML2Canvas.js, it didn't work.
Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?
You have access to the complete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.
so all you need is a unique identification of the svg element in question.
start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the command prompt:
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js');
(document.getElementsByTagName('head'))[0].appendChild(e);
$('svg');
the last command will provide you with a dom fragment containing the svg element.
the preceding vanilla javascript commands add a script element referencing the jquery library to the current web page. jquery simplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).
if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.
Note
in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg') (thanks to Ir0nm for this information).
Answering part one of your question :
If you're trying to locate the svg tag by the console, you can get it with :
document.getElementsByTagName('svg')[0]
if you have multiple svgs embedded on the page, change the [0] (or remove it) to catch the right part.
From there, you could right click to view that svg element in the elements panel, and from there copy as xhtml. (i tried that line with this page : http://www.w3schools.com/html/html5_svg.asp )
In webkit browsers you can right click on SVG element and choose "Inspect Element". this will open the Web Inspector tool. Typically from there you can right click on the svg node and "Copy As HTML", or from the console type $0.outerHTML
Then paste SVG into a local document. You could then use phantomjs to rasterize it.
Old versions of Opera (v12 and older) had the unique ability to right click the SVG image, and "Copy Image"; this would put a raster image on your clipboard - (I abused this feature back in the day.) - disclaimer: i use a mac, may be different on windows.
Just been looking at this and came across svg-crowbar - a chrome specific bookmark. You put it on your bookmark bar, and on a page with SVG you click on the bookmark. A box will hover over each SVG with a download button.
The downloaded SVG also includes the relevant style information, in case the SVG has been styled using CSS.
Solutions that work for me (on a Mac):
1 - Drag the Logo to your desktop (any browser)
In some cases, the code of the page allows you to drag the .SVG file from the website directly onto your desktop or chosen folder. Super easy!
2 - Print to PDF (Safari, Firefox)
This requires a little more work and might now always work. On the Print dialog, go to PDF > Save as PDF. The preview should allow you to see if the logo will be exported or not (sometimes, it doesn't work).
After export, you can open the file in the vector editing app of your choice.
3 - Drag and drop from Chrome's Inspector
This one might work in desperate cases. Inspect the logo element, and hover over its name. A little window with a thumbnail will appear with the logo inside. Click the small logo, drag it to a folder.
There might be other solutions like mentioned above (copy the code and convert it somehow - in the third website example I showed this didn't work because the code looks like this, or SVG Crowbar also works sometimes (and sometimes not - like when the download boxes are overlapping).
I have a PDF (or PPT) document that i want to embed in a website. This would be done using one of the standard plugins available for this. What I want is to get the current active page number from the plugin in the website.
IE. Using javascript, or anything else, use a function that gets the current active page from the plugin. Does anyone know of either:
a) A specific plugin that would allow this.
b) A workaround, or hack to do this.
Thanks.
No, there isn't. The adobe plugin runs in a completely different sandbox and interacts with the browser through a different API.
You could use imagemagick's command "convert" to turn your pdf into image files, displaying them in the browser via JS. You could create a image slideshow where you know which page your visitor is viewing.