How to capture screen shot of polymer elements in html and javascript? - javascript

I have a web page I want that when I click capture button then it should capture the screen of the web page including google polymer elements and save it in root folder. I have tried html2canvas library but it is not working.

I think your best bet is to use a servers side browser-less application like PhantomJS (http://phantomjs.org/) that is built on the latest webkit. You can also use node to call PhantomJS, e.g. https://www.npmjs.com/package/url-to-screenshot
I don't think you will get anything working that is implemented on the frontend that is cross-browser compatible.
Or use a service like https://screenshotmachine.com/ that already implements server side webkit rendering engine, e.g. https://screenshotmachine.com/serve.php?img=polymer-tut-appspot-com-FULL-b521fb.png is a screenshot of the Polymer example https://polymer-tut.appspot.com.
Hope that helps

Related

Is it possible to create a react app that runs when Javascript is disabled in browser?

I am developing a reactjs site and I want to make that site running even when the javascript is disabled in browsers. Is it possible? how to develop a react site that runs on both conditions (Enabled and disabled of Javascript) for ex: fb, StackOverflow are running even javascript is disabled how it happens?
React is a JavaScript framework for the front-end. Which means it executes in the browser. If you disable JavaScript in the browser, React doesn't work anymore. Just in the same way if you delete Photoshop from your computer, you can't open .psd files anymore.
If you really must support browsers without JavaScript (which most people don't), you need to build your app to work with plain old HTML based navigation (think links, forms etc).
It's possible to use React (for people with JS enabled) and a fallback for those without, this approach is called Progressive Enhancement. Might be useful to you: https://softwareengineering.stackexchange.com/questions/25969/should-i-bother-to-develop-for-javascript-disabled
First thing, React is a javascript library so it depends on Javascript. But you can use server side rendering like Next.js and render the content on server side.
But still user cannot use any react feature in browser.
It's good to render the initial content on screen.
Stackoverflow renders the initial content on server and sends the initial rendered content to the browser.
It's also good for SEO.

Should I Be Using A WebView?

I am currently building an Android and iOS mobile app using Appcelerator/Titanium.
The app is straight forward enough - our API returns a JSON response of the latest stories, the stories and displayed in a list and when a user selects a story this is rendered.
Up until now I have been using Phonegap for our apps, so it was dead simple to simply output the HTML in the JSON response and everything worked.
Now I've moved to Appcelerator due to some limitations I encountered with Phonegap and the fact it's really just a fancy WebView. However I can't see any better way to display a stories content than in a WebView again.
For example, the API returns the complete story content as HTML and can contain pretty much any HTML tag <p>,<strong><img src=""/>links<script></script><iframe></iframe> as we tend to embed facebook,twitter posts, links, videos, graphs, iframes and inline javascript and CSS.
However it almost seems like a step backwards to me to be using WebViews again, but at the moment it seems to be a lot more practical than attempting to parse the HTML and extract elements that could be rendered as native components, most of which probably cant (embedded tweets/facebook)
I know appcelerator allows you to set HTML to the native label component but this only supports Android and does not cover JS or CSS. For iOS I've looked at AttributedStrings but again these are limited in support.
I guess I'm just looking for some re-assurance that this is the correct way to do this. I've read a lot that rendering the WebView components affects performance quite a bit, so this is why I'm so hesitant.
My other quandary is that I am struggling to capture all the clicks in the WebView. If a user clicks on an embedded tweet for example, then the app immediately becomes a full screen WebView of twitter, when really it should open in the external browser (a reason I want to move from Phonegap). Appcelerator does let you communicate via JavaScript to handle things like this, but it doesn't work for things like embedded tweets since they are in iFrames. Surely there is a way to do this, there's countless other apps out there that have achieved what I want to do, I just feel like I'm missing something obvious!
I think your problem can be solved using the webview component but taking into account some limitations:
If you want to capture events inside the webview, it can't be remote (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView). You can use a local template in your application and retrieve the content using an API service and render the webview as local content, in this way you can capture events like clicks.
There is some limitations to embed third-party content like twitter, facebook. You must make some "hacks" to embedded content works fine.

Chrome Apps <a> tag not working

Its been a few years since I have worked on Chrome apps. I started messing around with making some simple examples to learn the new process. The problem is that I have found that using an <a> tag to change the html page that is loaded to another html page inside the packaged app will not work. I'm looking for different methods of changing the screen with retrieving user input (button click, link click. and so on). I have looked online and have found very little documentation about making chrome apps most examples show how to make a simple "Hello World" and how to publish it. Not many extensive tutorials beyond that. Just to clarify this app would be a real chrome app not a link to some site. all files would be packaged with the chrome application.
Chrome Apps are meant to be "single page apps", and cannot navigate links by design. <a> links should open in a regular browser window instead.
If you want to do "url routing" within your application to change views, you can just roll your own solution, but should probably use a framework to help you out instead.
Here are some examples:
Polymer
Angular
Ember
Meteor
Backbone
The list is extensive. There are likely many other stack overflow answers that compare each framework.
The DOM (Document Object Model) which represents the contents of a Chrome App window is initiated from an HTML file, but from that point on you can't change it by referencing any other file, which is what you're expecting navigation to do. (<a> elements that navigate to an external browser via a "target=_blank" attribute are perfectly OK.)
However, you are free to change the DOM from your JavaScript at runtime. If you like, set an event handler on the <a> element and change the DOM as you wish. If you want to change the DOM via HTML (not from a file), you might find the JavaScript method insertAdjacentHTML useful. Actually, you can get the HTML from a file, but you have to read that file yourself with the Chrome App file I/O API.
Advice in another answer to use a framework is, in my opinion, overkill. If you think of a Windows app, a Mac app, or any other kind of GUI-based app, you would never assume that you could just change the UI over to something completely different by referencing an HTML file. Think of a Chrome App as being similar to those technologies in that sense, and you'll be on the right track.

Scraping a dynamically loaded, javascript lidded website using Pythons BeautifulSoup [duplicate]

I need to scrape a site with python. I obtain the source html code with the urlib module, but I need to scrape also some html code that is generated by a javascript function (which is included in the html source). What this functions does "in" the site is that when you press a button it outputs some html code. How can I "press" this button with python code? Can scrapy help me? I captured the POST request with firebug but when I try to pass it on the url I get a 403 error. Any suggestions?
In Python, I think Selenium 1.0 is the way to go. It’s a library that allows you to control a real web browser from your language of choice.
You need to have the web browser in question installed on the machine your script runs on, but it looks like the most reliable way to programmatically interrogate websites that use a lot of JavaScript.
Since there is no comprehensive answer here, I'll go ahead and write one.
To scrape off JS rendered pages, we will need a browser that has a JavaScript engine (e.i, support JavaScript rendering)
Options like Mechanize, url2lib will not work since they DO NOT support JavaScript.
So here's what you do:
Setup PhantomJS to run with Selenium. After installing the dependencies for both of them (refer this), you can use the following code as an example to fetch the fully rendered website.
from selenium import webdriver
driver = webdriver.PhantomJS()
driver.get('http://jokes.cc.com/')
soupFromJokesCC = BeautifulSoup(driver.page_source) #page_source fetches page after rendering is complete
driver.save_screenshot('screen.png') # save a screenshot to disk
driver.quit()
I have had to do this before (in .NET) and you are basically going to have to host a browser, get it to click the button, and then interrogate the DOM (document object model) of the browser to get at the generated HTML.
This is definitely one of the downsides to web apps moving towards an Ajax/Javascript approach to generating HTML client-side.
I use webkit, which is the browser renderer behind Chrome and Safari. There are Python bindings to webkit through Qt. And here is a full example to execute JavaScript and extract the final HTML.
For Scrapy (great python scraping framework) there is scrapyjs: an additional downloader handler / middleware handler able to scraping javascript generated content.
It's based on webkit engine by pygtk, python-webkit, and python-jswebkit and it's quite simple.

Interacting with webpage from C++ Application

i have a sitation where i want to access HTML DOM object from within my application to update certain parts of web page through javascript commands at run time.
It is a local webpage opened in FireFox which would be accessed by my application, so that the final output is always shown at the webpage which is updated by appliation.
It would be great if you could give me some idea about how this can be accomplished.
I have similar requirement like the webmonkey extension of firefox but need to do it outside of browser from my application.
You can try QtWebKit from the Qt framework, it provides an OO set of classes to interact with webpages from basic actions to very complicated and advanced stuff. I believe you may find your answer there, a link is provided below...
Good Luck
see Here

Categories