cefpython to take screenshot of current html (optional: specific elements) - javascript

I use cefpython inside PySide on Python 2.7. To create advanced 3d transitions between div's I have to cut the div in e.g. 20 parts which I can animate separately. I found no way to do that "natively" so I have to simulate the split by taking a screenshot of a specific element in the dom (I could also take a screenshot of the whole dom and cut out the required element by coordinates.).
How can I take a screenshot of a specific div in my DOM or how could I take a screenshot of the whole visibile part of a Webpage in cefpython and PySide.
JavaScript functions often just render the html into a picture but I need a completely real picture since the user should not know that the animation is created from a picture instead of a real div.
Is there an easy way to capture an element (or the whole currently visible part) of a Webpage using cefpython and PySide (or JavaScript and HTML)?
( By the way: Cefpython embed a chromium browser into PySide.)

You can render contents of the window that embeds a browser to a bitmap. In pyqt/pyside you can render QWidget to QImage. For an example google "qwidget to qimage": https://www.google.com/search?q=qwidget+to+qimage

Related

Accessing iframe through console using DOM and BOM in JS

I've been playing around with DOM and BOM in JavaScript through Google Chrome's console trying to change locally input values, colors, etc...on different websites. I stumbled on a website that used iframe tags for it's form. I tried to change the value of the inputs located inside the iframe but couldn't get it done. My understanding is iframe incorporates a separate webpage inside of the one currently viewed.
My question is simple how do I access the tags inside of the iframe?
Things I tried so far:
document.getElementById("")
document.getElementsByTagNames("")
window.frames
window.parent
So an iframe is an inline frame, and what that inline frame contains is the building blocks to build a website, or display someone elses website. If you know DOM traversal you would basically have to select that iframe, and then go to select the DOM objects within that iframe from there to manipulate those.
iframe = $('#myId');
iframe.contents().find('htmlelements');
Here is a sandbox environment to begin understanding the traversal portion:
http://jsfiddle.net/fDFca/

HTML tags don't appear in DOM when included using ng-include

I'm trying to include a file using ng-include.
the side-bar appear in the UI but when I say view page source that time the HTML tags of the side-bar doesn't appear.
That is because when you view the source of an HTML page in any browser, it will perform a fresh GET of the original document and display that source code. Since AngularJS injects elements to the DOM dynamically (and because it is "just" JavaScript all together), the original generated by the server-side will not be modified. To see the generated source, use a developer tool of your choice, i.e F12 Developer Tools in IE. Also, you may want to read up on the role JavaScript plays in the whole lifecycle of webpage rendering.

Modifying HTML while document is loading

Assume you have 75 div's that have data-id="{some number}" attribute. The overall page size is unfortunately big, very big.
There are many repetitive HTML snippets in my HTML document like image tags or links. These images/links' only changing portion is the id.
The HTML document is quite long, these snippets contribute to the overall size of the document.
I can run a javascript when dom is ready, but the user experience will be:
- wait the page loads, and start seeing nodes etc,
- page loads,
- extra snippets show.
I can make the top container DIV to hide until the page loads but
- worried that google search bot could realize the div is hidden and skip the content (or does it?)
- the users won't be able to see the content while the page is loading.
What ideal is to load the page in HTML without much extra markup for google search bot, and add extra elements while it's loading with javascript.
Any tricks that I can try that comes to your mind to accomplish this?
Thank you.
The best performance and user experience is to do as much work as possible on the server, then send efficient HTML and allow the browser to display the page as it's received. Sending say a single DIV container, then using script to clone it 70 or 80 times will be slower (probably a lot slower for some users).
Hiding content completely until your script has finished is the worst solution - users are left with a blank (or minimal content) page, waiting for something to happen.
The vast bulk of most pages is script and images, replacing HTML with scripting really is playing at the margins. e.g. this page has 90KB of HTML and 264KB of script, images and css. Apple's home page has 12KB of HTML and around 800KB of script, css and images.
Browsers show content progressively as it's received because that's how they evolved over many years on the web. Users prefer to see something rather than nothing, and to start viewing content while the rest loads (it's all about the content, not about fancy layouts or effects). Try to work with browser behaviour and features rather than against them.
You can greatly help the browser by specifying sizes for images and having an efficient layout. That way the layout won't change much as new content is received.
Depending on other page content, you could run your script on DocumentReady as opposed to onload.
DocumentReady runs after the page downloaded and the DOM rendered, but before images are retrieved.
I believe that there is an official DocumentReady event somewhere, but I still have to support IE6 on my pages, so I use a busy loop to watch the DOM.

How to convert a web page to PDF or image using Javascript?

I have created a graphics using jquery. and i want to convert this web page to pdf or an image. Which one is simpler? but when I convert this page to pdf that graphic will not shows. can any help me to solve this problem??? please refer some code.
JavaScript is interpreted by the browser, not by the HTML -> PDF application. I'd recommend using wkhtmltopdf, as it uses Webkit to render, so maybe that would fix your problem.
To try to render the page that includes JavaScript, fire up Google Chrome (or another browser with a DOM Inspector of sorts), open your webpage, right click and select Inspect Element, right click , click Edit as HTML, and copy & paste the HTML into a new text document, save it, and use that instead to convert to a graphics.
You have to go through a complicated process like this because that application that your are using renders only HTML + CSS, and doesn't even parse the JS. The DOM inspector shows the HTML pages as it currently looks, not when it was loaded.
I hope I didn't make it too complicated...

Create image based off a SWF (flash) element on the page? PHP/Jquery/Javascript/HTML/FLASH

Is there anyway to take take a "screenshot", "save" or "capture" the active SWF element on a page as an image? I'd like for users to be able to simply click a button on my page, instead of having to need to manually take a screenshot of the entire page and then crop the image to show only the SWF element.
I found a Jquery method, although I am unsure if it could work with SWF files. It basically captures an area of an Image element on the page and allows you to save that as a separate image. What I would need however, is to capture the SWF as the image instead. Note: I do not have access to the SWF code so I cannot achieve this using Actionscript or anything like that -it has to be purely done with PHP and Javascript.
Thanks for any ideas :)
I don't think that there is a way to do this from Javascript, but if you host those swf files on your own server you could create a wrapper swf which loads the swfs you want to screenshot dynamically and then draws them into a BitmapData object.
The snapshot process inside of the swf can be triggered from Javascript via ExternalInterface, after that you can either serialize the raw pixels or use a PNG or JPEG encoder inside the wrapper swf to convert the bitmapdata to a image file and then send that data back to Javascript via ExternalInterface. Or you use the FileReference class in the swf to save the image file directly on the user's hard drive - one caveat in this is though that in order to trigger the save process the user will have to click a button inside the swf (that's a security feature).
There is one more prerequisite and that is that the swfs that you load into the wrapper have to be hosted on the same domain as the wrapper swf, otherwise the security sandboy will not allow to take a bitmap snapshot of it.
Look at ByteArray.getPixels(0,0,stage.stageWidth,stage.stageHeight) or var b;BitMap = BitMapData(stageW,stageH).draw(stage), depending on your needs. Note that the above two lines are not proper code, just the correct object and function names written in shorthand and from my head.

Categories

Resources