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.
Related
I have a div with overflow:hidden which contains image (.draggable()) that is usually larger then the div and I need to get only visible part of the image and send it to server side script and save as new file. So my question is, how to get only that visible part?
Thanks!
The solution is by getting the x,y position of the draggable. You can get that data by using .top() and .left() on your div. Then you should send the whole image to your server with the top, left, width, height data and crop it on your server-side.
Please note that I think that it would be possible to crop it to the Client side by using a Canvas HTML5 element and some tricky javascript.
You have two options, depending on the method that your are moving your image in the div, save the parameters in inputs using javascript and pass them using POST method when submitting.
For example you pass the TOP and LEFT of image and you already know the WIDTH and HEIGHT of div, so if the left is -375px, you know that you should crop the image from 375px to (375px + div's WIDTH) and same goes for top.
Better option is to use this nice jQuery plugin:
http://deepliquid.com/content/Jcrop.html
You should look at the absolute top and left values of the image and compare it with same top and left of the div, take the differences along with the div width and send all this data to server side where you can crop the image via some other programs /library.
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 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.
I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?
There are a fews ways to put labels on images in web applications.
Make an HTML element like a div or span, whose css background property is an image. You will have
to change the css dynmaically if the image is read from a database.
Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
Generate the whole display using <canvas>
Given what you have already, I would go with option 1.
You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.
If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.
How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.
If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.
You have to options to accomplish this:
Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.
Add a normal image and a normal hyperlink. You can use a regular img tag or use set the background image of the container. Then use absolute positioning to move the hyperlink to the desired position on top of the picture. With that solution you don't need Javascript to create a hover effect.
Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm
If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.
Edit- From your comments I see you're looking for php: Adding text to images with PHP
You could use this tool:
http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html
and here on github:
https://github.com/blauharley/LoremImageCryptonator
With help of this JS-Object you can embed any text you want. It offers two methods (getCryptoImage, getTextFromCryptoImage) that can be used for inserting and extracting any text into and out of an image.
For your use-case you can insert an URL and extract it as soon as the image is clicked.
But first of all you need to create a "Crypto-Image" that a URL has been inserted into before then saves the image. The saved "Crypto-Image" can then be shown on a page.
Hope this helps.