I am trying to make an image editor kind of page. Person can add text and styles to the background image. Everything i have done through HTML, Jquery and css, but struck up with export it to an image. I want to convert the particular div into image.
Note: I already know HTML to image conversion is possible through SVG and HTML5 Canvas. I cannot do those things because of browser compatibility.
If any PHP classes or jquery plugin is available please help me.
I think it is not possible without HTML5 features on the client side directly. May be I wrong?
My solution is to send the entire div (with styles) to backend server, where capture a screenshot with PhantomJS or Qt Webkit. On the server side you shoold open the DIV user created as it displayed in user browser and then make screenshot of this DIV.
Related
Is it possible to display some php content within an HTML image (say display on the screen of an iPhone where iPhone being an image)
Well, if you just want to overlay text on an image, why create an image at all.
you can use css background image(iphone in this case) for a div and the insert your phpp content as a child of that div. Using proper css styling and positioning, you will get your desired look. Its simple and less server consuming than going the image creation way.
You could generate your own image on the server using the GD library to overlay your content onto the image and then send that to the client.
You can use CSS to achieve the same effect, without requiring any server processing; however, it must be an image, you might want to check out the image processing library that allows you to manipulate images using PHP http://php.net/manual/en/book.image.php.
I want to add editable text (with font selection) to an image using jquery and want this to be saved as a new image.
Can someone give me some examples or opensource tools for this?
To Explain further, jquery would be used to write text and select font over an image and in the server side PHP can be used to save the new image. I have already developed some server side coding to do the same but looking for a jquery solution for the front end.
The only way you can do this is to use canvas and "save as image", but canvas is not well supported - so if a public website then not recommended. Link: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Otherwise you need to do as two separate actions - write the text for display as jQuery, then recreate the image using GD library in PHP. You'll struggle to get them identical, but they can get pretty close.
I am building a web app that needs to export a div to an image. That div will contain images, other divs, text with css styling, etc. At the end, the user should have an image that would look the same as if he had taken a screenshot of that div. I 've looked into server-side php libs but I don't see anything that would handle the complexity of the rendered HTML. HTML5 canvas has that capability but I can't use a canvas for my case. Any ideas?
Thanks!
Check out html2canvas. A javascript framework that renders the page content on a canvas element.
You could wrap the div in a canvas tag, access the pixel data directly, send that to a PHP script and use the data to construct an image.
Here's how you get the pixel data
https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas
And here's what you would use to create an image pixel by pixel
http://php.net/manual/en/function.imagesetpixel.php
I've written a project that converts HTML with CSS styles to canvas.
It is available here: https://github.com/coolbloke1324/html-to-canvas
And an example test page is available here: http://www.isogenicengine.com/html-canvas/test/index.html
On the test page, the initial load will just show a square div with some other divs inside it with various stylings like backgrounds and borders including border radius etc. You'll see a button on the top-right of the page marked "Render". Click that and a canvas will be created and then the DOM will be parsed and rendered to the canvas. I intentionally changed the background colour of the canvas to black so you can see the difference.
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.
Is there any way I can direct display PDF files in modal boxes?
I am using CodeIgniter PHP framework and jQuery as JavaScript framework.
UPDATE: I read on net that this is possible by loading it in iframe, and Adobe PDF will render it, but many seems to oppose, so is there any way I can convert those PDFs to images?
Short answer: No.
Longer answer: Usually, PDF documents are not rendered by the browser directly, but rather by some specialized PDF reader. As soon as the browser sees a content type of application/pdf, it passes the response along to the reader. Nothing you would do in your HTTP headers, HTML or JavaScript would make it across the gap between the browser and that other program, and the PDF format itself contains no switch to enable any kind of modal user interface.
Update: Rendering the PDF as an image would allow you to display the graphical content of the document in a more modal fashion. You still are not able to block the user from closing the browser, but you would be able to "lock down" anything else on your page while the image is displayed.
Related: How do I convert a PDF document to a preview image in PHP?
If you really want to, you can just embed it as a normal object. For example:
<object type="application/pdf" data="embeddedfile.pdf" width="500" height="650">
That's a bad idea. Always let the user set their browser to how they want to handle PDF files. So just create a link to the pdf. Modal windows aren't for that purpose anyway.