Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.
I found this...
html to jpg with c#
However...
I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.
It looks like you should be able to do it using javascript with this technique:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Make sure to take note of the following caveat however:
Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.
EDIT: You may also want to check out these related questions:
Save HTML5 canvas contents, including dragged-upon images
How to save a HTML5 Canvas as Image on a server
Related
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
I've recently come across a situation to work with progressive images. My understanding is, image has to be stored as progressive and browsers will do the loading job.
To prove this, I've created an image as progressive image (with 3 parses and 5 parses) and used it in a sample HTML file with <img> tag. I've uploaded the HTML and image the server. And I don't see any progressive loading.
Is there anything we should do to enable it? As I said, I thought browser will do the loading part automatically.
<<Update>>
Here the example HTML - https://dl.dropboxusercontent.com/u/2456662/Progressive/progressive-demo.html
First two images are exported as progressive images with 3 parses and 5 parses respectivey. Thrid image is the base line image.
When I access the HTML, all 3 are downloaded like base line (regular model). Progressive should load the entire picture in the first shot followed by other pixels - right?
I have a pptx file, complete with working links which i would now like to convert to html. The idea really is to convert the pptx file into a website.
I am using Power Point 2010. I got some tips on how to do this conversion
# http://support.microsoft.com/kb/980553 and a tool which does exactly the same thing
# http://www.ultrashareware.com/Ultra-PPT-To-HTML-Converter.htm
I am able to get an html version,but the links do not work. Navigation is only possible by clicking the slide number created on the left pane of the created html frame.
My questions
1. How do i get the links on the html page to work as they did in the pptx
2. The main page is divided into 2 frames, the left showing the slide numbers. How do i get rid of the left frame entirely?
Thank you
Sameer
If you're interested in writing it yourself, it's a fairly substantial undertaking. The most direct method is to export an image of each slide and put that into the resulting HTML with an IMG tag. You'd also need to construct an image map and include in it each of the hyperlink URLs from the slide, along with coordinates normalized from PPT's slide size to the size of the image you're adding to the HTML. Or work out how to put links in DIVs atop the image.
If you're looking for an immediately available commercial add-in that gives you more control over the appearance of the HTML, I've written one. There's more info and a free demo at http://www.pptools.com/ppt2html/
I'd be happy to answer any questions you have about it, but it might be best not to clutter SO with support chat. There's a Contact link on each page of the pptools site; best to use that to get in touch, if you wish.
I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.
I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?
You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.
If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.
also if you are using cms. you should be turn off bbcode image, and embed html