在使用c＃asp.net绑定到Repeater之前，更改图像大小。

Question

I want to change image size before display on view using c# asp.net.I am using Repeater to bind all my data.I am explaining my code below.

index.aspx:

<asp:Repeater ID="rptBannerId" runat="server">
                 <ItemTemplate>
                    <div class="ls-slide" data-ls="<%# getLs(Container.ItemIndex) %>">
                       <asp:Image ID="image1" runat="server" ImageUrl='<%# "/Upload/Banner/" + Convert.ToString(Eval("Bnr_Image")) %>' CssClass="ls-bg" />
                        <div class="intro ls-l" data-ls="<%# getDataLs(Container.ItemIndex) %>" style="left:80%;top:35%;">
                            <span class="icon fa fa-heart"></span>
                            <h2><span>"<%# getSpanValue(Container.ItemIndex)%>"</span>"<%# getH2Value(Container.ItemIndex)%>"</h2>
                            <p><%# Eval("Bnr_Description")%></p>
                            <div class="buttons">
                                <a href="" class="prev"><i class="fa fa-angle-left"></i></a>
                                <a href="" class="button">Read More</a>
                                <a href="" class="next"><i class="fa fa-angle-right"></i></a>
                            </div>
                        </div>
              </div>
              </ItemTemplate>
              </asp:Repeater> 

In this page one image is present which is retrieving from database.I need before bind inside Repeater this image properties like width and height will always change to 1920*680 without losing its quality and then it will display on view page.My code behind page is given below.

Index.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using BusinessLogic;
namespace Odiya_Doctor_Client
{
    public partial class index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            indexBL objIndexBL = new indexBL();
            rptBannerId.DataSource = objIndexBL.getBannerData();
            rptBannerId.DataBind();
        }
        protected string getDataLs(int itemIndex)
        {
            if (itemIndex == 0)
            {
                return "offsetyin:top;offsetxin:0;durationin:2000;offsetyout:bottom;offsetxout:0;durationout:1000;";
            }
            else if (itemIndex == 1)
            {
                return "scalexin:0.3;scaleyin:0.3;rotatexin:180;offsetxin:0;durationin:2000;durationout:2000;scalexout:2;scaleyout:2;offsetxout:0;fadeout:true;showuntil:3000;";
            }
            else
            {
                return "skewxin:30;skewyin:0;offsetxin:right;fadein:false;durationin:2000;durationout:1000;offsetxout:right;offsetyout:0;fadeout:true;";
            }
        }
        protected string getLs(int itemIndex)
        {
            if (itemIndex == 0)
            {
                return "transition2d:9;slidedelay:7000;";
            }
            else if (itemIndex == 1)
            {
                return "transition2d:40;slidedelay:7000;";
            }
            else
            {
                return "transition2d:11;slidedelay:7000;";
            }
        }
        protected string getSpanValue(int itemIndex)
        {
            if (itemIndex == 0)
            {
                return "SYMPTOM";
            }
            else if (itemIndex == 1)
            {
                return "HELP";
            }
            else
            {
                return "LAB";
            }
        }
        protected string getH2Value(int itemIndex)
        {
            if (itemIndex == 0)
            {
                return "CHECKER";
            }
            else if (itemIndex == 1)
            {
                return "ONLINE";
            }
            else
            {
                return "TESTING";
            }
        }
    }
}

Please help me to resolve this issue.

Answer 1

If you are willing to use a standard img control you can call a method from your source tag with the image directory. The only part that's impossible that you want to resize the image without loosing quality.

<img runat="server" id="imgCtrl" src="'<%# resizeAndConvertToBase64("/Upload/Banner/" + Convert.ToString(Eval("Bnr_Image")),1920,680) %>'/>


protected string resizeAndConvertToBase64(string imageDirectory, int newWidth, int newHeight)
    {
        Bitmap newImage = new Bitmap(newWidth, newHeight);
        Image srcImage = Image.FromFile(imageDirectory);

        using (Graphics gr = Graphics.FromImage(newImage))
        {
            gr.SmoothingMode = SmoothingMode.HighQuality;
            gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
            gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
            gr.DrawImage(srcImage, new Rectangle(0, 0, newWidth, newHeight));

        }
        MemoryStream ms = new MemoryStream();
        newImage.Save(ms, ImageFormat.Gif);
        var base64Data = Convert.ToBase64String(ms.ToArray());
        return "data:image/gif;base64," + base64Data;
    }

EDIT: Missed the part that you want to resize all the images before binding. So just store the base64 strings in your data source and use it then.