How to integrate a custom Screen Capture App inside my HTML Page? - javascript

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.

Related

Display pdf document on website (mobile friendly) with vue.js

I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.

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.

Convert div(Part of webpage) to image

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.

Trigger click on embedded PDF

I have a PDF embedded in a web page using the following code:
<object id="pdfviewer" data='test_full.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='500px'
height='350px'>
The PDF itself is set to open in full screen mode which shows no controls. The user can advance the slides by clicking on the view.
What I'd like to have is some way to trigger that click so that I can advance 2 similar PDF:s side-by-side (one for the actual slideshow and one for the speaker notes). Is this possible to do in javascript and/or jQuery? I have tried using the click()-method but it doesn't get through to the embedded PDF.
Update: Can't find any info on it, so I guess I'm out of luck and have to try a workaround. Am currently juggling 3 embeds of the same pdf (current page, next page and previous page), hiding and showing them and loading more pages as the user clicks around.
I doubt it. Allowing web page scripts to pass input events to the PDF viewer could be a security risk (since the viewer generally has access to system file dialogues via things like Save As).

Categories