retrieve image from database then resize it before rendering on webpage

Last post 06-25-2009 1:51 AM by olalekex. 3 replies.

Sort Posts:

  • retrieve image from database then resize it before rendering on webpage

    01-30-2006, 9:16 AM
    • Member
      40 point Member
    • kenpatt
    • Member since 01-30-2006, 2:00 PM
    • Posts 8

    Here is my issue. I am trying to figure out the best way to pull an image from a database(the database holds the location of the image not the blob itself). Then while it is in memory resize the full sized image to a thumbnail.

    I have the query that I want to use which is:

    <%@ page explicit="true" language="vb" debug="true" %>
    <%@ import namespace="system.data" %>
    <%@ import namespace="MySql.Data.mysqlclient" %>

    Sub page_load

     If not ispostback then

    'variables
    Dim myConn as MySql.Data.MySqlClient.MySqlConnection
    Dim sqlcmd as MySqlCommand
    Dim dtrhomes as MySqldatareader

    'database connection and query
    myconn = new MySql.Data.MySqlClient.MySqlConnection ("Server=myserver;Database=mydbase;Uid=xxxx;Pwd=xxxx;")
    myconn.open()
    sqlcmd = new MysqlCommand("SELECT propertypic FROM waters ORDER BY RAND() LIMIT 1",myconn)
    dtrhomes = sqlcmd.executereader()

    'bind repeater
    rpthomes.datasource = dtrhomes
    rpthomes.databind()

    dtrhomes.close()
    myconn.close()
    end if
    end sub
    </script>

    <asp:repeater ID="rpthomes" Runat="server">
    <itemTemplate>
    <img src='<%# container.dataItem("propertypic") %>' >
    </itemTemplate>
    </asp:repeater>

    Now comes the hard part how do I marry the above with this:

    <@ page content type="image/jpeg" %>
    <@ import namespace="system.drawing" %>
    <@ import namespace="system.drawing.imaging" %>

    <script runat="server" >

        Sub page_load
     Dim objBitmap As Bitmap
     Dim objGraphics As Graphics

    'create bitmap
    objBitmap = new Bitmap(120,120)

    objGraphics = Graphics.FromImage( objBitmap )

    'display bitmap

    objBitmap.save( response.outputstram, imageformat.jpeg )

    End sub
    </script>

    As you see I want to create an image that is 120x120 and that the image location is stored in the propertypic field in a database.

     

    Thanks for all the help

    Ken.

     

  • Re: retrieve image from database then resize it before rendering on webpage

    02-25-2006, 1:14 PM
    • Member
      45 point Member
    • cmgray
    • Member since 09-19-2005, 2:43 PM
    • Posts 9

    Here is some C# code that I use to do exactly that.  I pull the image from an image field in a database and resize it memory, then put it out to the output stream.

    public partial class ShowImage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

      SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);

      SqlCommand photoCommand = new SqlCommand("SELECT Image FROM Photos WHERE PhotoID = @PhotoID", connection);

      photoCommand.Parameters.AddWithValue("@PhotoID", Request.QueryString["PhotoID"]);

      try {
       connection.Open( );

       // Get bytes return from DB Command
       byte[] b = (byte[])photoCommand.ExecuteScalar();

       if(b.Length > 0)
       {
        // Open a stream for the image and write the bytes into it
        System.IO.MemoryStream stream = new System.IO.MemoryStream(b, true);
        stream.Write(b, 0, b.Length);
                
        // Create a bitmap from the stream
        Bitmap bmp = new Bitmap(stream);

        Size new_size = new Size( );

        //resize based on the longer dimension
        if (bmp.Width > bmp.Height) {
         new_size.Width = outputSize;
         new_size.Height = (int)(((double)outputSize / (double)bmp.Width) * (double)bmp.Height);
        }
        else {
         new_size.Width = (int)(((double)outputSize / (double)bmp.Height) * (double)bmp.Width);
         new_size.Height = outputSize;
        }
        Bitmap bitmap = new Bitmap(new_size.Width, new_size.Height, bmp.PixelFormat);
        Graphics new_g = Graphics.FromImage(bitmap);

        new_g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
        new_g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        new_g.DrawImage(bmp, -1, -1, bitmap.Width + 1, bitmap.Height + 1);

        bmp.Dispose( );

        //Draw the bitmapt to the outputstream
        bitmap.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        bitmap.Dispose( );
        new_g.Dispose( );

        // Close the stream
        stream.Close( );
       }

       connection.Close( );
      }
      catch (Exception exc) {
       connection.Close( );
      }
        }
    }

    GrayMatterSoft
    Check out our new free rich date picker control for ASP.NET 2.0
  • Re: retrieve image from database then resize it before rendering on webpage

    01-14-2008, 8:08 PM
    • Member
      5 point Member
    • Benno74
    • Member since 12-13-2006, 1:11 AM
    • Posts 12

    Hi cmgray,

    I've been looking at your code above for retrieving an image from a database and getting the image dimensions. You reference a variable called 'outputSize' . I was wondering where the value for this comes from?

    Basically, I am successfully retrieving the image from the database and adding it to the Response.OutputStream stream, but cannot seem to get the image dimensions from the data, so I was looking at your code as it looks like it will achieve this. Everything else about it looks fine but just a bit stuck on the 'outputSize' value.

    I know it was written a little while ago now, but any chance you - if you're still around (or someone else) - could give me some guidance on this?


    Thanks in advance,

    Ben

  • Re: retrieve image from database then resize it before rendering on webpage

    06-25-2009, 1:51 AM
    • Member
      20 point Member
    • olalekex
    • Member since 03-31-2009, 4:12 PM
    • Posts 25

    Hi Benno74,

    I made use of the tipps cmgray posted and it works

    the 'outputSize' he mentioned is your own output size that you want the displayed image to have. for example you can replace the the line where 'outputSize is with 100. but first you have to declare the outputsize in int

        // Create a bitmap from the stream
        Bitmap bmp = new Bitmap(stream);

        Size new_size = new Size( );

       int outputSize=100;

        //resize based on the longer dimension
        if (bmp.Width > bmp.Height) {
         new_size.Width = outputSize;
         new_size.Height = (int)(((double)outputSize / (double)bmp.Width) * (double)bmp.Height);
        }
        else {
         new_size.Width = (int)(((double)outputSize / (double)bmp.Height) * (double)bmp.Width);
         new_size.Height = outputSize;
        }


    if this answer helps you please mark as answer

    olalekex

    OLALEKEX
    Germany.
    if my post helps you in one way or the other please give the girla point by MARKING AS ANSWER. Thanks
Page 1 of 1 (4 items)