locked
Can you create image on the fly from editor RRS feed

  • Question

  • User418707265 posted

    I need to create a dynamic image from text entered in a text box, similar to how this site shows: http://www.sitepoint.com/article/generating-asp-net-images-fly  However, the user would like to use a rich text editor like FreeTextBox or Rich Text Editor to change font size, color, etc and then have it create the image to look like what they typed in the editor.  I'm thiking I could parse the html from the text editor to find the font size, color, etc. for drawing the image, but was wondering if anyone has tried to do this or not. Thanks!

    Wednesday, May 14, 2008 1:20 AM

Answers

  • User1963151947 posted

    I can tell you a couple of things we ran into from a previous job. We had to do something similiar with a preview image and generating PDFs.

    One would be that most of the rich text editors out there generated different HTML depending on the clients browser ( Firefox, IE, Safari, etc. ) which made it really hard to parse.  They also had a tendency to generate malformed HTML.  What I mean by that is that it would open a LI tag but never close it.  Both of these things made it really hard to parse out.  I ran across this one a while ago but I have never used it.  It states that it generates the same markup for every browser it supports and is XHTML compliant.  That may fix this issue we had.

    http://www.componentart.com/webui/editor.aspx

    Another one we ran into was that GDI+ did not have a good way of changing fonts, font sizes, color, bold/italic, etc... in one block of text. We had to split the text out ourselves and combine it afterwards.  The problem with that is figuring out where one part of the block of text ends and the next one begins and handling wrapping, different font sizes, etc... Maybe that has changed with the newer .NET frameworks and GDI+, but I don't know for sure.

    We also had the issue with using different fonts.  In order for the rich textbox editor to display the correct font while they are typing, the client has to have that specific font on their machine.  The generated image would be fine because the font is on the server, but you wouldn't be able to have the editor "look" correct to the user as they are typing.  You might be able to do something with fonts using Flash or Silverlight, but I don't know for sure.  Flash has been out for a while.  Silverlight is pretty new.  I think you would need to use the newest version of Silverlight, but it is currenly in beta.  You can research sliverlight at http://www.silverlight.net if you have seen anything about it yet.  It is basically Microsoft's answer to Flash.

    The last thing I can remember is that we had to educate the user and to understand that how it looks in the editor is not necessarily how it would look in the PDF.  They need to make sure the preview and the generated PDF/image looked as they expected.  What I mean by that is the rich textbox editor was generally bigger or smaller that the resulting PDF/image.  So how the text wrapping looked in the editor was not necessarily how it would look in the preview/PDF.  They needed to make sure everything looked like they wanted in the resulting image/PDF, not just the rich text editor.

     I hope this helps and good luck.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 15, 2008 10:29 AM

All replies

  • User1963151947 posted

    I can tell you a couple of things we ran into from a previous job. We had to do something similiar with a preview image and generating PDFs.

    One would be that most of the rich text editors out there generated different HTML depending on the clients browser ( Firefox, IE, Safari, etc. ) which made it really hard to parse.  They also had a tendency to generate malformed HTML.  What I mean by that is that it would open a LI tag but never close it.  Both of these things made it really hard to parse out.  I ran across this one a while ago but I have never used it.  It states that it generates the same markup for every browser it supports and is XHTML compliant.  That may fix this issue we had.

    http://www.componentart.com/webui/editor.aspx

    Another one we ran into was that GDI+ did not have a good way of changing fonts, font sizes, color, bold/italic, etc... in one block of text. We had to split the text out ourselves and combine it afterwards.  The problem with that is figuring out where one part of the block of text ends and the next one begins and handling wrapping, different font sizes, etc... Maybe that has changed with the newer .NET frameworks and GDI+, but I don't know for sure.

    We also had the issue with using different fonts.  In order for the rich textbox editor to display the correct font while they are typing, the client has to have that specific font on their machine.  The generated image would be fine because the font is on the server, but you wouldn't be able to have the editor "look" correct to the user as they are typing.  You might be able to do something with fonts using Flash or Silverlight, but I don't know for sure.  Flash has been out for a while.  Silverlight is pretty new.  I think you would need to use the newest version of Silverlight, but it is currenly in beta.  You can research sliverlight at http://www.silverlight.net if you have seen anything about it yet.  It is basically Microsoft's answer to Flash.

    The last thing I can remember is that we had to educate the user and to understand that how it looks in the editor is not necessarily how it would look in the PDF.  They need to make sure the preview and the generated PDF/image looked as they expected.  What I mean by that is the rich textbox editor was generally bigger or smaller that the resulting PDF/image.  So how the text wrapping looked in the editor was not necessarily how it would look in the preview/PDF.  They needed to make sure everything looked like they wanted in the resulting image/PDF, not just the rich text editor.

     I hope this helps and good luck.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 15, 2008 10:29 AM
  • User-16411453 posted

     The gdLibrary is a good place to start.  There's a jscript wrapper out there, or you would have to write your own, but you need a good understanding of gd.  You can draw lines, text, fonts, make cad drawings and so forth with it. Output to gif, png or jpeg.

     

    GDLibrary.dll 

    Thursday, May 15, 2008 7:17 PM
  • User418707265 posted

    Thanks for the info.  I'll have to play around with the gdlibrary.dll and see how it goes.  My client has about 3 different sizes of LED displays and wants a web page where very novice people can select the size of display, type in the text they want to show up, be able to set font sizes, and preview the image to see how it would look on the display.  They have software for putting the image onto the displays, but need to allow very novice users the ability to create the dynamic images they need to upload to the display.  What they would really like is to be able to click on the image to edit the text and then click a button to save it which generates a new image with their changes.  I don't know if that is possible to do through the web or not.  Maybe Flash is my answer.  Anyway, thank you again for the information.  I'll post again if I come up with a good solution.

    Friday, May 30, 2008 11:34 AM
  • User-16411453 posted

    That's way different than the original description you gave.

    I've heard of Adobe Photoshop available on the web now.  GD is pretty slick, I've been able to create nice jpeg, png images with gradients and text no problem.  I've done CAD type drawings with it to.  I know in the image forum, asp.net is good at creating and sizing images with text as well. There is some sample code there.  A Flash program can do it, and make the user experience easy, but then you have to take the flash composition and create an image from it, or a pdf. I would just create a prepress example of the interface in Adobe Fireworks or Adobe Illustrator, and outsource the project to India or San Jose if I were you.  Then start the coding of the project.  It can be done, but you need a rock solid plan first.

    Friday, May 30, 2008 1:17 PM
  • User-850545757 posted

    Hi all,

     Can you please give me the code in C# for apply some some effects like Hue ,Saturation,Temprature,Expouer etc....

     Please help me out..ASAP

    Tuesday, June 3, 2008 8:11 AM