locked
image RRS feed

  • Question

  • User702049738 posted

    Hi experts;

      I have an image saved as a blob, however the display on the image is on a( 1500 X 1500) px which makes it look quite disproportionate in size since the physical image is only 1024 X 768 pixels. Is there anyway to resize the image to prevent it from looking to disproportionate in size

    Thursday, December 6, 2018 5:46 AM

All replies

  • User753101303 posted

    Hi,

    I would perhaps start with  https://www.w3schools.com/csSref/css3_pr_background-size.asp that allows to "cover" an element possibly croping the image. Is this enough ?

    Else you would have to use System.Drawing.Bitmap to really crop the image or you have services attempting to do so while keeping the main image subject in sight. Really dépends on the kind of image you are using.

    Thursday, December 6, 2018 9:13 AM
  • User702049738 posted

    Hi Patrice;

    thanks for the reply

    I have no issue with the image taking up the allocated space. the issue i am having is based on the fact, the image looks stretched out and distorted when loaded in a pixel frame of 1500 x 1500px. This is so because the image is originally 1024 X 768 px. Hence, I was just wondering what potential solutions are available since i have never encountered such a situation before

    Thursday, December 6, 2018 4:15 PM
  • User753101303 posted

    So try a background image with  https://www.w3schools.com/csSref/playit.asp?filename=playcss_background-size&preval=cover

    The image should be stretched (while maintaining the aspect ratio) and/or cropped to fully cover the 1500 x 1500px element.

    Thursday, December 6, 2018 4:24 PM
  • User702049738 posted

    Hi;

    Sorry to not have mentioned, it is an image control

    Thursday, December 6, 2018 5:01 PM
  • User-943250815 posted

    I also store Images on DB using varbinary(max) and show it on page using asp:Image.
    I do not save image on disk to load by ImageURL, and do not set width or height on Image control.
    I use one Hidden field to image image type and one Hidden field to store Base64 string of image, and a Image Control.
    Then with help of JQuery I set the "src" attribute of Image Control
    This way I never had a problem and all images are presented in their original size without any distortion
    Try it

    $(document).ready(function () {
    zImageType = $('#<%= hdfImageType.ClientID %>').val(); // Get Image type from hidden field
    switch (zImageType) {
    case 'GIF':
    $('#<%= ImgHolder.ClientID %>').attr('src', 'data:image/gif;base64,' + $('#<%= hdfB64Img.ClientID %>').val()); // Define image source
    break;
    case 'JPG':
    $('#<%= ImgHolder.ClientID %>').attr('src', 'data:image/jpeg;base64,' + $('#<%= hdfB64Img.ClientID %>').val()); // Define image source
    break;
    }
    });

    <asp:HiddenField ID="hdfImageType" runat="server" /> <%-- To store image type --%>
    <asp:HiddenField ID="hdfB64Img" runat="server" /> <%-- To store Base64 string --%>
    <asp:Image ID="ImgHolder" runat="server" ImageUrl="" style="display:block; margin:0px auto;" /> <%--To show image on page--%>

    Thursday, December 6, 2018 10:36 PM
  • User-893317190 posted

    Hi olybobo,

    If you save your image in your database as varbinary(MAX), you could use gdi+ to resize your image.

    Below is my code. Read data from database and resize it and  show it.

      if (context.Request.QueryString["Id"] != null)
                {
                    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString))
                    {
                        SqlCommand cmd = new SqlCommand("SELECT image,categoryName FROM [Categories]  WHERE CategoryId = @Id", con);
                        cmd.Parameters.AddWithValue("@Id", Convert.ToInt32(context.Request.QueryString["Id"]));
                        con.Open();
                        SqlDataReader sdr = cmd.ExecuteReader();
                        if (sdr.Read())
                        {       
    //the resized byte[],you could also use the array to updata your database so that it don't need the resize the image every time byte[] bys= ImageUtil.MakeThumbnail((byte[])sdr["image"], 1500, 1500, "Cut");
    context.Response.Buffer = true; context.Response.Charset = ""; context.Response.Cache.SetCacheability(HttpCacheability.NoCache); context.Response.ContentType ="img/jpeg"; context.Response.AddHeader("content-disposition", "attachment;filename=" + sdr["categoryName"].ToString()); context.Response.BinaryWrite(bys); context.Response.Flush(); context.Response.End(); } con.Close(); } }

    The method ImageUtil.MakeThumbnail  has four mode.

    The first mode named “HW”  is to  resize the image according the width and height specified ,which may cause distortion

     The second mode named “H” is to resize the image according to the height.

     The third mode named “W” is to resize the image according to the width .

     The fourth mode  named “Cut” is to resize the image according to the width and height specified which doesn’t  cause distortion.

    You could specify the mode through the fourth paremeter

                  // the first parameter is your image's byte array, the second parameter and the third parameter is the target width and target height
    public static byte[] MakeThumbnail(byte[] bytes, int width, int height, string mode) { MemoryStream stream = new MemoryStream(bytes, 0, bytes.Length); System.Drawing.Image originalImage = System.Drawing.Image.FromStream(stream); int towidth = width; int toheight = height; int x = 0; int y = 0; int ow = originalImage.Width; int oh = originalImage.Height; switch (mode) { case "HW": break; case "W": toheight = originalImage.Height * width / originalImage.Width; break; case "H": towidth = originalImage.Width * height / originalImage.Height; break; case "Cut": if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight) { oh = originalImage.Height; ow = originalImage.Height * towidth / toheight; y = 0; x = (originalImage.Width - ow) / 2; } else { ow = originalImage.Width; oh = originalImage.Width * height / towidth; x = 0; y = (originalImage.Height - oh) / 2; } break; default: break; } System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight); Graphics g = System.Drawing.Graphics.FromImage(bitmap); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(Color.Transparent); g.DrawImage(originalImage, new Rectangle(0, 0, towidth, toheight), new Rectangle(x, y, ow, oh), GraphicsUnit.Pixel); try { MemoryStream streamtarget = new MemoryStream(); bitmap.Save(streamtarget, System.Drawing.Imaging.ImageFormat.Jpeg); return streamtarget.ToArray(); } catch (System.Exception e) { throw e; } finally { originalImage.Dispose(); bitmap.Dispose(); g.Dispose(); } }

    My aspx.

       <asp:Image ID="Image1" runat="server" ImageUrl="/services/writeImage.ashx?id=2" />

    The result

    If you save your image as a file in your server ,you could refer to the link below

    https://forums.asp.net/t/2144782.aspx?How+resize+and+save+image+in+one+folder

    Best regard,

    Ackerly Xu

    Friday, December 7, 2018 4:52 AM
  • User-943250815 posted

    Hy Ackerly Xu, may be off context but where came from

    /services/writeImage.ashx
    Friday, December 7, 2018 2:42 PM
  • User-943250815 posted

    Forget about, i got it

    Friday, December 7, 2018 3:06 PM
  • User-2054057000 posted

    Just add the following CSS in your style sheet:

    img{
      width: 200px;
      height: auto;
    }

    Note I gave height as auto so it will not distort your image when changing it's width.

    Monday, December 17, 2018 11:40 AM