locked
How to create a nice looking GIF RRS feed

  • Question

  • User2089478681 posted
    It's a shame you can't upload images to this forum, otherwise it would be so easy to describe this problem.

    All I want to do is to allow my users to select a color,the site creates a simple GIF using that color and some black text, and then saves it for use on varous web pages displayed to the user.

    My problem is that the background on the GIF is not a nice smooth colour, but it's made up of a clearly visible pattern of two different colors. When I save it as a JPG the background is better, but the text looks fuzzy.

    How do I get a GIF with a simple one-colour background?
     
     


    Wednesday, November 9, 2005 10:16 AM

All replies

  • User2128074059 posted
    Maybe I can help you.
    I guess you want to make an image with only two colors, namely one color which your users select and the black which the text is.
    Am I describe correctly?Please tell me your problem more particular.
    Monday, November 14, 2005 9:05 PM
  • User2089478681 posted
    Yes, that's right - I want to put black text onto a colored background, where  the user has chosen the background by specifying the hex code.  I think the problem is to do with palettes and web-safe colors.  The system does not generate the background with exactly the color I want, instead it creates a pattern from two nearby web-safe colors.  If I change the format to JPG, then the background color becomes precise, but the text becomes blurred.
    Tuesday, November 15, 2005 2:52 AM
  • User-1029435529 posted
    it creates a pattern from two nearby web-safe colors.
    To understand why this occurs, you can read: Optimizing Color Quantization for ASP.NET Images. The article probably goes into much more depth than you care for. If this is the case, the following article provides a reasonably simply example of how to use the code from the first article: See Image Replacement In Action.
     
    Tuesday, November 15, 2005 5:48 AM
  • User2128074059 posted

    I think, you can only set the image's ColorPalette property.
    I write the following two functions to help you creating the nice looking GIF.
    And you can use the DrawNiceImage function like this,
    DrawNiceImage( "PhotoSprite@Hotmail.com", "#FFFF00", @"C:\Nice.gif" );

        /// <summary>
        /// Create a nice looking GIF
        /// </summary>
        /// <param name="text">the black text</param>
        /// <param name="strColor">hex code color string, such as #FF0000, #FF00FF...</param>
        /// <param name="dstFile">the destination image file name</param>
        public void DrawNiceImage( string text, string strColor, string dstFile )
        {
          // Convert the hex code color string to a standard color class.
          int R = Convert.ToInt32(strColor.Substring(1,2),16);
          int G = Convert.ToInt32(strColor.Substring(3,2),16);
          int B = Convert.ToInt32(strColor.Substring(5,2),16);
          System.Drawing.Color color = Color.FromArgb( R, G, B );

          // The background image
          Bitmap b = new Bitmap( 190, 20 );
          System.Drawing.Graphics g = Graphics.FromImage( b );

          // Draw the background by user specifying color
          g.FillRectangle( new SolidBrush( color ), 0, 0, b.Width, b.Height );

          // Draw the black text on the colored background
          g.DrawString( text, new Font( "Arial", 12f ), new SolidBrush( Color.Black ), 0, 0 );

          g.Save();
          g.Dispose();

          // Convert the image to a nice looking GIF
          Bitmap bNice = GifOptimize( b, color );

          bNice.Save( dstFile, System.Drawing.Imaging.ImageFormat.Gif );
          b.Dispose();     
        } // end of DrawNiceImage


        /// <summary>
        /// Convert the image to a nice looking GIF
        /// </summary>
        /// <param name="Img24">the original image</param>
        /// <param name="color">user specifying color</param>
        /// <returns>nice GIF</returns>
        private Bitmap GifOptimize( Bitmap Img24, Color color )
        {
          int width = Img24.Width;
          int height= Img24.Height;
          Bitmap Img8 = new Bitmap( width, height, PixelFormat.Format8bppIndexed );

          // You must set the ColorPalette and you can get a nice looking GIF
          ColorPalette colorPalette = Img8.Palette;

          // the black text color
          colorPalette.Entries[0] = Color.Black;
          // user specifying color
          colorPalette.Entries[1] = color;

          Img8.Palette = colorPalette;

          BitmapData src = Img24.LockBits( new Rectangle( 0, 0, width, height ), ImageLockMode.ReadWrite, Img24.PixelFormat );
          BitmapData dst = Img8.LockBits(  new Rectangle( 0, 0, width, height ), ImageLockMode.ReadWrite, Img8.PixelFormat );

          int stride1 = src.Stride;
          int stride2 = dst.Stride;

          System.IntPtr Scan01 = src.Scan0;
          System.IntPtr Scan02 = dst.Scan0;

          int iOffset1 = stride1 - width*4;
          int iOffset2 = stride2 - width;

          unsafe
          {
            byte * p1 = (byte *)(void *)Scan01;
            byte * p2 = (byte *)(void *)Scan02;

            for ( int y=0; y<height; y++ )
            {
              for ( int x=0; x<width; x++ )
              {
               
                if ( p1[2]==0 && p1[1]==0 && p1[0]==0 )
                {
                  // Black color
                  p2[0] = 0;
                }
                else
                {
                  // The user specifying color
                  p2[0] = 1;
                }

                p1+=4;
                p2++;
              } // x

              p1 += iOffset1;
              p2 += iOffset2;
            } // y
          }

          Img8.UnlockBits(dst);
          Img24.UnlockBits(src);

          return Img8;
        } // end of GifOptimize

     

    Wednesday, November 16, 2005 6:03 AM
  • User2089478681 posted
    Thanks - you are a star.  GifOptimize is exactly what I needed, I simply couldn't get my head round how to develop a bespoke palette.
    Wednesday, November 16, 2005 9:02 AM