I noticed after using Google+'s feedback that it takes a screenshot and also allows you to do things such as highlight and black out sections. I'm wondering how this can be achieved; based on the fact that you can modify the DOM with highlights and black outs I assume it's just taking the entire DOM and turning that into an image, however, I'm not sure how they're doing that aspect of it.
I know that PHP has a couple functions, 'imagegrabscreen' and 'imagegrabwindow' but they only work for Windows users so I have my doubts that this is what they're using.
So, my question is how are they turning the DOM into an image?
Google+ doesn't take the screenshot entirely on the client side. It sends the local (rendered) DOM to the server, renders it to an image, and returns the created image.
You can test this by adding a local image to the page (using Firebug), and then trying to create a feedback. That image won't be present.
JavaScript can read the DOM and render a fairly accurate representation of that using canvas. I have been working on a script which converts html into an canvas image. Decided today to make an implementation of it into sending feedbacks like you described.
The script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
It does not require any rendering from the server, as the whole image is created on the clients browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.
Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).
For more information, have a look at the examples here:
http://hertzen.com/experiments/jsfeedback/
My guess is that they gather information about page in question, highlighted blocks etc. render that page in an in memory version of a web browser and takes a screenshot of it.
Edit
To clearify:
If client is viewing http://some.page?someArg=someValue
The server renders http://some.page?someArg=someValue in an in memory browser takes a screenshot, sends the image to the client.
Related
I want the option of converting HTML to image and showing the result to the user. I would be creating an $html variable with PHP, and instead of displaying using echo $html, I want to display it as an image so the user can save the file if they needed to.
I was hoping there would something as simple as $image = convertHTML2Image($html); :p if that exists?!
Thanks!!
As #Pekka says, the job of turning HTML code into an image is the job of a full-blown web browser.
If you want to do this sort of thing, you therefore need to have a script that does the following:
Opens the page in a browser.
Captures the rendered page from the browser as a graphic.
Outputs that graphic to your user.
Traditionally, this would have been a tough task, because web browsers are typically driven by the user and not easy to automate in this way.
Fortunately, there is now a solution, in the form of PhantomJS.
PhantomJS is a headless browser, designed for exactly this kind of thing -- automated tasks that require a full-blown rendering engine.
It's basically a full browser, but without the user interface. It renders the page content exactly as another browser would (it's based on Webkit, so results are similar to Chrome), and it can be controlled by a script.
As it says on the PhantomJS homepage, one of its target use-cases is for taking screenshots or thumbnail images of websites.
(another good use for it is automated testing of your site, where it is also a great tool)
Hope that helps.
This is not possible in pure PHP.
What you call "converting" is in fact a huge, non-trivial task: the HTML page has to be rendered. To do this in PHP, you'd have to rewrite an entire web browser.
You'll either have to use an external tool (which usually taps into a browser's rendering engine) or a web service (which does the same).
It is possible to convert html to image. However, first you must convert to PDF. see link
You may have a look at dompdf which is a php framework to convert a html file to a pdf.
use WKHTMLTOPDF. works like a charm. it converts to any page to PDF ..
a jpeg can be obtained by performing later operation.
http://code.google.com/p/wkhtmltopdf/
I am just stuck a little in making a choice between PHP chart Lib and JavaScript Chart Lib. I do understand that PHP if for the server side and Javascript for the client side. My problem is what difference does it make when using their charting libraries. Is it performance issue or what?
I want to understand the difference in using PHP chart Libs and JavaScript Chart Libs. Please am not looking for examples of their chart libraries. I am looking for why i should choose one over the other.
I tried to google 'php chart vs javascript chart' but didn't get any links that can give me
the difference.
EDIT 1
1)
If this question has been answered before, then point me there.
2)
Am developing the application for internet
EDIT 2
1)
I have found out about PHPChart PHPChart which has both PHP source code and JavaScript source code. If anyone has experience in that library, does it may be solve the problem of server side load (bandwidth issues) etc.. I am thinking since it has both the PHP and JavaScript source then it may be the best to use. Am just assuming. :-)
Thank you very much
Both ways of creating graphs have their own pros and cons.
If you decide to do it using PHP, first you need to make sure that you have all the required graphical libraries installed (e.g. GD, which might not always available on shared hosts).
Assuming you have them, the first negative thing in my opinion is that you will end up with static images. Of course, it's not always a bad thing, as that ensures compatibility with all the clients, be those with or without javascript support, however, it takes away the dynamics of graphs generated on the client side using javascript. Your users won't be able to zoom, move, slide, full screen or do anything that they could with the likes of Highcharts or Flot.
Another con is that images take up more bandwidth than, say, JSON. The bigger you want to have your graph, the more colors it contains, the longer your clients will have to wait till your page loads. And just because those loads are not asynchronous, they will have to wait for the images to load before they will see the rest of the page.
With javscript libraries everything is different though. You only request the data required for your graph and you only request it when your page loads. The amount of data is usually smaller than an image would be plus you can compress your output with GZ to make it even smaller. Users will see nice spinners informing them that the graph is loading instead of some incomplete webpage.
Another thing to take into account is - what if you decide to show a nice table with data in them below each graph? If you chose to render images on the server, you would end up having to add new functionality just to get the data. With JSON, however, you just make one call, render the graph and display the table. Maybe calculate totals or do whatever you want with it. Hand it out to people as an API if you wish, after all :)
If you ask me, I would definitely go with client-side graphs as most of the devices have nice HTML5 support nowadays and being able to display a graph on an Android phone, or an iPhone or an iPad shouldn't pose a problem. If you only need images and you don't wish to expose the original data, go with PHP.
My opinion is that having a server side solution (i.e. php) takes away any browser compatibility issues you may have with a client side solution (i.e. javascript) and hence support issues.
A benfit of using JS is that it does offload resources from your server to the client because you may only have to generate some light weight data (e.g. JSON , XML) and the rendering occurs on the client. You will have to investigate how many hits your server is likely to get, etc to determine if resource is an isuse with PHP or JS.
However, using Php to create images of charts you can always get around the performance/resource issue by using a cache of the image files and serving from the cache (it's a just a folder of images) instead of generating a new one. Whether you cna use a cache will depend on your usage. If clients require up to the second data and its always changing, obviously a cache may not be of use.
Here's what I see :
Using PHP
Increase load on the server for the request
Will work everywhere
Also, like someone said here and made me think of it, you can cache the image that PHP give you, reducing bandwith (no lib to download) and reducing load (cache)
Using Javascript
Decrease load but increase the bandwitch and addition http request (to load the JS lib)
Will work where JS is available
But remember, PHP take more load then an HTTP request.
Also, always remember, Javascript is made for effects and specials stuffs you need to display.
There is one PHP render advantage that no one told about. Since sometime you need to include chart as image into PDF, DOC, XLS etc. file or email it – you have no other way except to render chart on server and store it as image to be inserted.
For data manipulation you use PHP.
For visual and behavioral effects you use JavaScript.
For that reason, you should use Javascript as its designed for visual behavior. Plus it will put less load on your server as all processing will be client side. As more people use your application simultaneously, it will start to slow down as your server will be doing a lot more then it has to.
Hope that helps :)
I have a question. I have to prepare a good report module for an application in PHP and MySQL. The report should be in two forms: a graph and a normal table with text. Tables and text are simple, but the graph is what I don't know how to begin. I was thinking about HTML5 (canvas) and Javascript, but honestly I don't know if this is a good idea.
I don't know if HTML5 is rendered on all browsers in the same way. A while ago it was a problem and I didn't have time to investigate it by myself. Good tips about new elements (canvas, article, footer and so on) on different browsers (including mobile ones) would be nice.
Maybe someone had similar problem and can give a tip on how to begin?
There are lots of free javascript tools for that, for example:
jqplot
Google charts
Google charts uses canvas for canvas capable browsers and flash for other browsers (like IE).
One thing you might consider is using wkhtmltopdf to generate a PDF of whatever HTML5 you want, using the consistent Webkit rendering engine. I'd set it up like this:
The user clicks a link that says "generate"
This loads a script which runs the report (generates the data, etc.) and outputs the HTML needed to a temporary file
Invoke wkhtmltopdf using the temporary HTML file as input and output it to a temporary PDF
Read the PDF into PHP, set the headers, and output the PDF to the browser
This should create a fairly seamless experience and shouldn't take more than a few seconds to run, and since it's Webkit, you can use whatever Javascript library you want to make charts (I like flot).
Depends on your target user group. If you wan't to hit the maximum ammount of web browsers you should probably go for a flash based graph solution. Flash however is not supported on iPad and iPhone.
If you want to support iPhone/iPad and still have an interactive graph, go with Canvas - however i don't belive it's supported by Internet Explorer yet.
We are downloading images to our computers when we open new webpages. For example: If a webpage has an image(image.jpg), our computer downloads it while we are surfing that page.
Some webpages are using ajax methods. For example: You don't see an image on the page's source codes, however your computer downloads an image. Because, if you click a link on that page, ajax will be showing that image...
Let me show an example:
<div id="ajax_will_load_image_here"></div>
Okay, how can php curl see (or download) that image? Curl can't see that image when I try to use preg_match function. Actually there is an image. I want to download that image by using php curl. Any advice?
If i understand the question correctly there is no convinient way of doing that.
Your crawler/spider would have to parse the website and evaluate javascript.
There are libraries for that but support is very limited.
There are however methods where an actual browser is used to evaulate the page (without displaying it but setting proper environment variables like resolution etc).
Then the generated source including javascript dom modifications is available.
This is for example how the google search previews are generated.
But if you require user interaction it gets pretty specific and complicated.
I am sorry to dissapoint you, but using curl and preg metch the old school way we used to when javascript was not yet so common wont work.
However for most legit use cases this is more than sufficient and websites are today more and more designed to be non-javascript compliant. Especially the content for crawling purposes. It is a must in search engine optimization, and which website doesnt want that?
I was wondering if it's possible to create an image of a div inside a page in php, jquery or javascript? Or even just a screenshot of the entire page (on my own server - not external)..
What I want to do is create an image of a graph (drawn in via jQuery) and pass it onto a PDF, as I can't seem to get the jQuery to display in the pdf..
Because of the security risks, it is not possible to get Javascript to make a screenshot of a web page. This would allow you to steal credit card info, etc... You can use an active X control or something like that, but the client has to knowingly install it in order for things to work.
In PHP, you can create an image and place it on a web page, but again, you cannot see what is on the client's screen. It has to be done on the server before it is sent to the client.
Here is an example of a library you can use to draw a graph in PHP. http://www.aditus.nu/jpgraph/
You might be able to mimic what jQuery is doing in your script but it will take a shift in your applications design.
Take a look at this article:
http://www.developerfusion.com/code/181/capture-screenshot/
It's not client-side code, but you mentioned PHP so maybe server-side code is an option. I don't think you can do it client-side...
How about using a server side graph generator, for example for PHP? Maybe the transition hurts but you'd get a really stable and simple solution.
If you describe what kind of charts you exactly generate and what server side options you have, I'm sure you'll get some specific hints.
Your best bet is to use the GD library on the server to generate the graph as needed. There's no practical way to screencap the browser canvas. Check out this PHP graphing library, it may be what you're looking for:
http://graphpite.sourceforge.net/
If you run into problems where you're doing processing on the client-side that don't exist on the server (i.e.: summing up rows or taking in user settings from cookies), maybe you need to consider passing that data back to the server and letting your hosting handle it (after all, that's why you run a server with lots of RAM and a big CPU, to crunch numbers).
If your javascript draws the graph on a canvas, you can serialize the canvas and then send it to the server using POST.
I don't know if jquery can draw the graph on a canvas, but if the graph is a simple one you could probably code it yourself as canvas has drawing tools already.
Obviously, this only works with browsers supporting canvas.