Converting HTML to an image.
-
Here's my problem: My user is given a text box where they can enter pretty much anything (including HTML formatting commands) and we save that and display it later on either their screen or other screens. Problem is, we need to have it come exactly the same way on all screens regardless of screen resolution/default settings/... This includes where the words wrap, ... So I thought I'd take the string they enter and convert it to an image. That way it will always look the same way. Is there a way to convert HTML to an image programatically (or through some process) that requires no human intervention? Essentially I would say - here's the string, here's where I want you to save it, go! and it would produce a file for me? I've looked at using the system.drawing objects of .net but if you mix styles (bold/italics/fonts...) you have to manually calculate where the strings go and that sounds like to much of a pain. Any suggestions would be greatly appreciated. Jeffrey.
-
Here's my problem: My user is given a text box where they can enter pretty much anything (including HTML formatting commands) and we save that and display it later on either their screen or other screens. Problem is, we need to have it come exactly the same way on all screens regardless of screen resolution/default settings/... This includes where the words wrap, ... So I thought I'd take the string they enter and convert it to an image. That way it will always look the same way. Is there a way to convert HTML to an image programatically (or through some process) that requires no human intervention? Essentially I would say - here's the string, here's where I want you to save it, go! and it would produce a file for me? I've looked at using the system.drawing objects of .net but if you mix styles (bold/italics/fonts...) you have to manually calculate where the strings go and that sounds like to much of a pain. Any suggestions would be greatly appreciated. Jeffrey.
You don't have to convert it to a picture, if you use tables that will not allow the screen size to modify the lok of the page. Although, the only way to have resolution never matter is only if you have everything in black and white, because resolution has to do with colors on the screen, so even a picture couldn't solve that.
-
Here's my problem: My user is given a text box where they can enter pretty much anything (including HTML formatting commands) and we save that and display it later on either their screen or other screens. Problem is, we need to have it come exactly the same way on all screens regardless of screen resolution/default settings/... This includes where the words wrap, ... So I thought I'd take the string they enter and convert it to an image. That way it will always look the same way. Is there a way to convert HTML to an image programatically (or through some process) that requires no human intervention? Essentially I would say - here's the string, here's where I want you to save it, go! and it would produce a file for me? I've looked at using the system.drawing objects of .net but if you mix styles (bold/italics/fonts...) you have to manually calculate where the strings go and that sounds like to much of a pain. Any suggestions would be greatly appreciated. Jeffrey.
I think the only reliable way of using existing tools would be to convert the html to pdf and then convert the pdf to an image.
I can imagine the sinking feeling one would have after ordering my book, only to find a laughably ridiculous theory with demented logic once the book arrives - Mark McCutcheon
-
I think the only reliable way of using existing tools would be to convert the html to pdf and then convert the pdf to an image.
I can imagine the sinking feeling one would have after ordering my book, only to find a laughably ridiculous theory with demented logic once the book arrives - Mark McCutcheon
No, the best way is to add tables. It is both the simplest, and the RIGHT way. Tables are not only used for organization, they are accutally used more for formatting issues, such as a web site for multiple screen resolutions.
-
No, the best way is to add tables. It is both the simplest, and the RIGHT way. Tables are not only used for organization, they are accutally used more for formatting issues, such as a web site for multiple screen resolutions.
It really depends where you approach this problem from. I don't know how big the content being entered is and what it contains. So I'm attempting to provide an answer to the question that the poster asked as I interpreted it. How to shrink HTML content down to a smaller size like resizing an image does, basically to produce a thumbnail of a page. I don't know of any way to do that using just HTML. Now, if creating thumbnails of HTML on the server is a good idea that is even practical, I'm not sure about that. I just suggested the only approach I could think of that wouldn't require too much development work. ExpertComing wrote: No, the best way is to add tables. It is both the simplest, and the RIGHT way. Even for something as deceptively simple as HTML there is rarely a simple RIGHT way to do anything. Most new HTML pages avoid tables completely since they cause more layout problems then they fix and reduce the ability to seperate content from layout. Check out http://www.csszengarden.com/[^] for examples of modern html development. I'm not saying tables are WRONG in all cases, but they are usually best at just displaying tabular data.
I can imagine the sinking feeling one would have after ordering my book, only to find a laughably ridiculous theory with demented logic once the book arrives - Mark McCutcheon
-
It really depends where you approach this problem from. I don't know how big the content being entered is and what it contains. So I'm attempting to provide an answer to the question that the poster asked as I interpreted it. How to shrink HTML content down to a smaller size like resizing an image does, basically to produce a thumbnail of a page. I don't know of any way to do that using just HTML. Now, if creating thumbnails of HTML on the server is a good idea that is even practical, I'm not sure about that. I just suggested the only approach I could think of that wouldn't require too much development work. ExpertComing wrote: No, the best way is to add tables. It is both the simplest, and the RIGHT way. Even for something as deceptively simple as HTML there is rarely a simple RIGHT way to do anything. Most new HTML pages avoid tables completely since they cause more layout problems then they fix and reduce the ability to seperate content from layout. Check out http://www.csszengarden.com/[^] for examples of modern html development. I'm not saying tables are WRONG in all cases, but they are usually best at just displaying tabular data.
I can imagine the sinking feeling one would have after ordering my book, only to find a laughably ridiculous theory with demented logic once the book arrives - Mark McCutcheon
OK - let me clarify again. Let me give you some context so you can see what the problem is I'm having. We have a product that essential provides news service to our clients. Part of that is that people can create thier own content to display on the screen (the screen is a large 42" plasma screen). When they create the content on their own machine, it will be displayed via html. When it get's to the plasma screen, it may look slightly different - words wrap, the font, yadda yadda yadda. The other problem is we don't have a specific plasma screen so they may have different resolutions 848x480, 1365x768, .... but we want text to look the same on all of them. Now when I say 'look the same' I mean that we would like to have the text scale appropriately so that the final size would be the same. In other words, if it ends up being 1" tall in one resolution, we'd like it to be 1" in all resolutions. (Try this - look at a web page. Now change your screen resolution to something much larger - say 1260x1024 - and you will notice that the text is teeny tiny.) Think of it this way - I always want the same text to take up a space on the screen 3" by 4". But the text always needs to be the same. So if on one screen it would "This text is on the screen." On another screen it would also show the same text "This text is on the screen." wrapped the same way and the final size would be the same. That's why I was thinking of making an image out of it. Then I could scale the image to whatever size I would need and the text would 'scale' appropriately. Whereas it would actually be the image is resizing but it would look like the text has just magically resized itself. Hope that makes it clearer as to what I'm trying to accomplish. TIA - Jeffrey.
-
OK - let me clarify again. Let me give you some context so you can see what the problem is I'm having. We have a product that essential provides news service to our clients. Part of that is that people can create thier own content to display on the screen (the screen is a large 42" plasma screen). When they create the content on their own machine, it will be displayed via html. When it get's to the plasma screen, it may look slightly different - words wrap, the font, yadda yadda yadda. The other problem is we don't have a specific plasma screen so they may have different resolutions 848x480, 1365x768, .... but we want text to look the same on all of them. Now when I say 'look the same' I mean that we would like to have the text scale appropriately so that the final size would be the same. In other words, if it ends up being 1" tall in one resolution, we'd like it to be 1" in all resolutions. (Try this - look at a web page. Now change your screen resolution to something much larger - say 1260x1024 - and you will notice that the text is teeny tiny.) Think of it this way - I always want the same text to take up a space on the screen 3" by 4". But the text always needs to be the same. So if on one screen it would "This text is on the screen." On another screen it would also show the same text "This text is on the screen." wrapped the same way and the final size would be the same. That's why I was thinking of making an image out of it. Then I could scale the image to whatever size I would need and the text would 'scale' appropriately. Whereas it would actually be the image is resizing but it would look like the text has just magically resized itself. Hope that makes it clearer as to what I'm trying to accomplish. TIA - Jeffrey.
Like I said translating to pdf and then to an image is the only way that I know of to do this easily. Another option is to programatically load the page in IE and then do a screen capture of the resulting image. If you wanted to stick with pure html/javascript, I'd create a style sheet per resolution for text size and positionining. Then use javascript to select/resize images and choose the stylesheet to load.
I can imagine the sinking feeling one would have after ordering my book, only to find a laughably ridiculous theory with demented logic once the book arrives - Mark McCutcheon