I have a type of word cloud that I developed. Its really just a simple database search result that applies random CSS styling (size, color, vertical layout, etc) to keywords to make it look pretty inside a div or single cell table. These keywords get retrieved via a PHP/mySQL function.
I would like to be able to output that DIV/table cell's (whichever would work better) contents along with the CSS styling to an image file. I've seen posts suggesting HTML2Canvas but haven't had any luck getting the search results with the CSS to show up in the image and not even sure if its possible in this case.
Any ideas to point me in the right direction?
Thanks,
You could use an html to pdf script, like this one, and then use the imagick php function to convert that to an image.
Source: http://buffernow.com/html-to-image-php-script/
Related
I already looked at How do I convert my entire div data into image and save it into directory without using canvas?
And I used the html2canvas library and i was able to get an image, but it was not how i wanted it because I had a 3dtransfomed div inside and the final image did not keep that property.
The result using the html2canvas lib was this:
And what I wanna get is something like this (blue dots are irrelevant):
I have lets say this html code: <div id=background><div id=pig style=transform: matrix3d(1,2,4,2,34,4,5,3,54,3,4,4)><img src=whatever/></div></div> And I want to convert it to an image. I tried using the html2canvas library that they mentioned on the post i linked to at the top. But the result was the first image i posted. What I want the result to look like is the second image. So I thought it was because it did not take into account the transform3d on the pig div.
I'd recommend taking the image you get (which looks fine, but not skewed correctly) and running it through CSS transformations.
Information about CSS 3D Transforms
This demo of skewing a 3D prism with CSS should be of particular interest to you
I have a psd file with two text layers.
I would like to add a quote in the first text layer and a name in the second.
The data is coming from a csv.
The quotes can vary in length. The font size for the "quote" text layer therefor needs to be set to fit within the text box.
I tried scripting it for the better part of the day now and am stumped.
Thank you!
While it's not Photoshop, you might want to check out Templater for After Effects which lets you dynamically insert data into layers. Templater also comes with layout logic that allows you to determine the fitting of various lengths of text and resolutions of source images.
The data can come from a tabbed-separated value file or from a Google Sheets document. Even though it works for After Effects, you can use Templater to export still images from AE.
Learn more at http://dataclay.com
I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
I need to load a very large text into a dialog box using YUI or jQuery and I'd like to know the best way to do it. I have an Oracle CLOB column which I need to show if the user needs to know what was stored there. Since CLOB data are huge, it is impossible to load everything. Any ideas?
Use multiple divs and load each one with what's left of your clob content when your user drops cursor in it : you can do this either using connection manager for YUI 2 or nodeList if you are using YUI3 (here's an example of how to use it)
Put it in a fixed-size DIV and add: overflow-y:auto.
I want to create this kind of graph on the basis of user entered data.
the main issue is regarding the display of boxes on the point.
Let me explain you a bit,background does contain a gradient image which resembles to the color of urine the patient want to mention.
Please suggest me something to create this graph.Whole data is need to be fetched dynamically.
If none of the many graphing tools out there can help you, you can think about this with plain old HTML :-)
Either a table or absolutely positioned DIVs. If you use a table, you can identify the cell and add a class to give that cell's border a red colour. You can do the same with DIVs. When you print the table cells or DIV to the page, you can identify them with 8-2-27 (unit-month-date) and your JSON data can match the corresponding cell/div and add a class.
Of course this is a bit more work than using an out of the box plugin. But it is possible. I have done a similar thing in the past. I found it easier to do everything on the server side and print the HTML (this was before jQuery had a plugin for everything).
gRaphael, JSChart, PlotKit, HighCharts are some common libraries used today to create chart in the client side. You need to provide JSON data and HTML Element only. Remaining task are not needed to be done by you. You can use JFreeChart to create a chart (image) on the server side and send it to the client side.