I generate an image on a few overlapping canvases when a page is loaded (without user-interaction), but that does take ~3 seconds to fully draw. I want to flatten these canvases, and convert this image to a PNG on the server, for use in thumbnail previews.
Flattening to a single canvas (using ctx.drawImage(other_canvas,0,0)) and then ctx.toDataUrl() looks like exactly what I need. Is there a way do this on the server side without requiring a user's browser? Some kind of command-line javascript / canvas parser perhaps, which can load the page, wait for the canvas to finish rendering, then inject some javascript to flatten, call toDataUrl, resize and save the resulting image.
AJAX solutions which render and send the thumbnail back to the server won't work as I need the thumbnail before the first person has viewed the page. It also needs to be fast (hopefully only slightly longer than the time the canvas takes to render, 3 seconds). I can't wait for an external service like browsershots.
I looked at CutyCapt, but that renders the entire webpage, not just the canvas (and also doesn't seem to draw everything on my canvas for some reason).
You might want to take a look at Phantomjs:
https://github.com/ariya/phantomjs/wiki/Screen-Capture
This does a good job of rendering html content to a PNG, although this will also do the entire page. Perhaps you can wrap the canvas contents you are interested in in a separate page and then use phantomjs to turn it into a png.
PHP has various libraries for server-sided image generation which offer functionality which is similar to the HTML5 canvas.
Look into PhantomJS which is a command line version of the webkit browser and you can do cool things such as save the output of a rendered page in an image etc. AFAIK you can also inject javascript code which can give you more control when to take a screenshot with it.
http://phantomjs.org/
Related
I am looking to create a small app that allows a user to create a custom cover for a book. The client doesn't want to just be supplied with what the customer selected but a print ready 300dpi JPEG or PDF.
I know PHP can handle most of this. But the customisation seems to be a bit difficult to get right. I have tried using canvas to create the client side preview, which work ok enough.
Just to see if I'm wasting time trying to recreate the wheel, does anyone know if something like what I need exists already?
Basically it would be something kind of similiar to this but for creating print ready images.
Thanks!
If you're using Canvas for building the editor, for the best results, I'd recommend you re-render the customization on the server using whatever technology fits your need in PHP and not try to take the image they're looking at and make it work somehow by sending it to the server. The DPI will be wrong if you use Canvas in a standard way (it will be at the screen DPI).
For example, if they have the ability to place an image, then just note the coordinates and place the image in a web server created image at 300 DPI. Text, same thing, etc. Yes, it will be extra work, but it should be of higher quality and better consistency.
This would imply that there's a simple serialization format for the representation of the custom cover that is sent to the web server.
You might be able to use SVG, but you'll have to introduce a reliable SVG to PDF conversion and handle fonts. Maybe something like this? (I'm not sure that building an SVG editor would be easier than Canvas based).
Starting from your "work ok enough preview", jsPDF will be able to generate a PDF right from the browser in a breez.
convert the canvas to a image/jpeg (toDataURL will be your best friend)
instanciate a jsPDF object, add the image
output the jsPDF object
Tricky details:
beware your screen displays stuff with 72dpi but print expect 300dpi. So you can up scale your canvas then draw the image within the pdf PDF
beware to Cross Origin Resources: if you are using images outside your domain, you are doomed (or you will need a proxy)
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 working on a project that consists of a online store, to sell Printed Circuit Boards.
But the hole system will be automated, and will be able to view online the Gerber files (Gerber are the files that has the machine code for the pcb).
I need to choose the best way to "output" this file uploaded by the user, to the webpage. Only for viewing the PCB before buying.
I have done the entire PHP code to process the Gerber, but, I can't decide if the file will be proccesed, and then:
I will save as a PNG file (rendering will be done with the PHP image library {that is a shit}), and if the user zoom, or do anything, it will not be perfect... (I would need to render in a high resolutiong, and would take a lot of space, and also time to load)
Render as an SVG file (Vector file), and show on the HTML as an mbeded element (Does it work on all new browsers? Is it slow to proccess?), The SVG file are awsome in terms of drawing lines...
And the last but not least way to doit, is to create a list of JavaScript commands, that draws on a Canvas Element (I have already implemented this, and works really good, but I don't like to think, that I'm actualy 'rendering' to a code...)
Anyway, what do you think I should use, and if I didn't tought in another way of doing it, please tell me!
Here is an example of the output as Canvas (With the source being a JavaScript function object, that has many drawLine commands):
I'm opting for SVG file, even if it's slower than canvas, but considering that won't be real time drawing process in terms of user interaction with the drawing object it's a good choice. SVG's are actually vectors, hence the images won't be crispy on large images. There are some quite good libraries out there which are working with svg-s like:
http://processingjs.org
http://d3js.org/
http://fabricjs.com/
http://raphaeljs.com/
I think d3 is one of the best. I definitely wont' recommend PHP image library.
I have a php/mysql driven database, where image paths are stored for specific pages. The images are all hosted locally on my server. Users can upload images, and the data is then stored in mysql.
I would like to enable users to draw on top of rendered images.
Do I need JAVA to accomplish this?
Are there other APIs or languages that can aid me in my goal?
Basically, I would just let users draw "on top" of the existing image. Somehow their drawings would be saved to a .png, which I can then overlay on top of the original image. However, I'd like for the user to be able to choose the color, etc. Also, I would like to limit how much a person can draw on each photo per 24 hour period.
So, what do you guys think? Flash? JAVA? Php (if I should be so lucky)? I would love to hear your thoughts on this.
JavaScript.
The HTML5 Canvas might do the trick.
You need not to use Java. You can do that with PHP Canvas programming or in client side javascript canvas.
http://www.phpjabbers.com/put-watermark-on-images-using-php-php20.html
http://motyar.info/blog/2010/04/drawing-on-web-with-canvas-and-jquery.html
Look at SketchPad (http://mudcu.be/sketchpad/) - it has examples of everything you want to do in HTML5 / Canvas, but note that a downside of the Canvas approach is the "save" is a little clunky and seems to be browser dependent. You need to convert the image to a data uri, then save it using the available browser commands manually (like right click and "Save As").
I want to create an animation using an image that refreshes every 15 minutes hosted at this url:
http://www.bungie.net/Stats/Halo3/Nightmap.ashx
What is the best way to store the images and then animate(loop) the 24 most recent images?
Should I use a mysql database to store it or something else?
What are your thoughts?
Thanks
Perhaps you want something like this:
http://www.metoffice.gov.uk/satpics/latest_IR.html?
As you can see in the html of that page, they get the images names output as a JS array. You would use PHP in this case to get those names and make that JS array.
EDIT: To retrieve the images from that URL you can use php's file() function or the curl functions, for which there is an example here. As I see it, the url returns only the image file itself, so you don't have to bother with html scrapping.
Then, when you click the Play button the images are first preloaded via AJAX, this way the "animation" is quite smooth. If you use Jquery for the client side functionality it should be pretty easy both to preload the images via AJAX and do the animation itself.
As an alternative to AJweb's solution, you could also generate an animated GIF on server side every 15 minutes via a cronjob. To generate the GIF, you could use the PHP Graphics Library.
On the client side you would then only need to refresh the GIF every 15 minutes, or, check via AJAX if there's a new GIF aviable and then refresh.