How to make pictures with rounded corners in ASP.NET

hi i used this code (PictureViewer.aspx) in 2 host
one of them not worked

see this working : http://markaz3.progman.ir/contact
this host is win2008 r2

and this not worked : http://Markaz3.ir/contact
this host is win2008

Why?
Help Me Please

is there somebody to help me?

how can we treat the address of the image path ? I mean will it Server side path or Client side path?

22:56 18 Sep '09 Dmitri Nesteruk wrote:
"Not to be picky or anything, but using GDI+ server-side is a dubious decision. Ever since Direct2D (and DirectWrite) came out, I've started using them server-side, with huge performance improvements. Look here for an example."

Yes, For games “GDI+ is slow” You are right.
But what about more trivial and very simple tasks like that we are talking about?
No more words…just test it.

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Image[] im = new Image[100];
        Trace.Warn("Start");
        for (int i = 0; i < 100; i++)
        {
            im[i] = new Image();
            if (i % 2 == 0)
            {
   // assign (i + 20) to Radius on each step
 im[i].ImageUrl = "~/PictureViewer.aspx?Filename=Wolf1.png&Color=00ff00&Radius=" + (i + 20);
            }
            else
            {
                
im[i].ImageUrl = "~/PictureViewer.aspx?Filename=me1.png&Color=0000ff&Radius=" + (i + 20);
            }
            Page.Controls.Add(im[i]);
        }
        Trace.Warn("Finish");
    }
}

Results :

Message ---- From First(s)--- From Last(s)

Begin Load ---- 0.0001694 ------ 0.000017
Start ------------ 0.00018896 ----- 0.000020
Finish -------- 0.00033604 ---- 0.000147
End Load ------ 0.00036228 ----- 0.000023

The size of Wolf1.png = 69kb
The size of me1.png = 44kb

0.000147 second for 100 pictures on page!

Do you still want to use Direct2D for such trivial tasks?

Umm, I don't think that reusing a single image constitutes a fair test. I'd opt for something more along the lines of

var r = new Random();
im[x] = new Bitmap(1+r.next(1000), 1+r.Next(1000));

That said, I'm not intending to pursue the point here, but from personal experience (and I do *a lot* of server-side image generation), I'd stay as far away from GDI+ as possible.

That's my $.02, anyway.

What do you think about this?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Drawing.Bitmap[] Bmp = new System.Drawing.Bitmap[100];
        for (int i = 0; i < 100; i++)
        {
            String filepath = Server.MapPath("") + "\\image_" + i.ToString() + ".png";
            System.IO.FileInfo fileInfo = new System.IO.FileInfo(filepath);
            if (!fileInfo.Exists)
            {
                Bmp[i] = new System.Drawing.Bitmap(800, 600);
                System.Drawing.Graphics G = System.Drawing.Graphics.FromImage(Bmp[i]);
                System.Drawing.Font Fnt = new System.Drawing.Font("Verdana", 18, System.Drawing.FontStyle.Bold);
               G.DrawString("Tis is a pcture Number " + i.ToString() + "\nand its corners hav radius "
                    + (i + 50).ToString(), Fnt, System.Drawing.Brushes.Blue, 20, 100);
                Bmp[i].Save(filepath, System.Drawing.Imaging.ImageFormat.Png);
                Bmp[i].Dispose();
                G.Dispose();
                Fnt.Dispose();
            }
        }
        

        Image[] im = new Image[100];
        Trace.Warn("Start");
        for (int i = 0; i < 100; i++)
        {
            im[i] = new Image();
            im[i].ImageUrl = "~/PictureViewer.aspx?Filename=image_" + i.ToString() + ".png" + "&Color=00ff00&Radius=" + (i + 50).ToString();
            Page.Controls.Add(im[i]);
            im[i].Dispose();
        }
        Trace.Warn("Finish");


        }
}

Begin Load-------0.00017592------0.000022
Start-----------0.00514304------0.004967
Finish----------0.00541004-----0.000267

result is the same!

It took 0.000267 seconds to process 100 files!

modified on Sunday, September 20, 2009 6:45 PM

This test is wrong. You just tested assignment to the variables and calling Page.Controls.Add.

Not to be picky or anything, but using GDI+ server-side is a dubious decision. Ever since Direct2D (and DirectWrite) came out, I've started using them server-side, with huge performance improvements. Look here for an example.

Привет, Дмитрий.
Вот простой тест, который показывает, что не стоит беспокоиться
о скорости выполнения в GDI+

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Image[] im = new Image[100];
        Trace.Warn("Start");
        for (int i = 0; i < 100; i++)
        {
            im[i] = new Image();
            if (i % 2 == 0)
            {
                im[i].ImageUrl = "~/PictureViewer.aspx?Filename=Wolf2.jpg&Color=00ff00&Radius="+( i + 50);
            }
            else
            {
                im[i].ImageUrl = "~/PictureViewer.aspx?Filename=me2.jpg&Color=0000ff&Radius=" + (i + 50);
            }
            Page.Controls.Add(im[i]);
        }
        Trace.Warn("Finish");
    }
}

Results :

Message ---- From First(s)--- From Last(s)

Begin Load ---- 0.0001694 ------ 0.000017
Start ------------ 0.00018896 ----- 0.000020
Finish -------- 0.00033604 ---- 0.000147
End Load ------ 0.00036228 ----- 0.000023

0.000147 second for 100 pictures on page!

Вряд ли Вы выиграете в скорости используя Direct2D

а если и выиграете 1/100000 секунды, то в масштабах

интернета это сродни беспокойству о потерянном зёрнышке

с грузовика!

To All
You are right, Alex and mambo_2. no need to perform this code every time the browser requested page. It waste resources of the server.
It is better to place it just after you send the picture to the server. For example..

  // Has the form been submitted?
if (fupUpload.PostedFile != null &&
     fupUpload.PostedFile.FileName.Length > 0)
{
   //translate Stream to Image
 System.Drawing.Image im = System.Drawing.Image.FromStream(fupUpload.PostedFile.InputStream, true);
   // MakeRoundedCorners
im = Global.MakeRoundedCorners(im, 50, 2, 4, "#0066CC");
       
}

Thank everybody for ideas!!!

Hi Valeriy
I think you should use your own HTTP Handler instead of System.Web.UI.Page and you should think about cashing images. This solution kills the server in heavy traffic.

Concur, however vote 2 is a little too low.

thanks nice code

One person's data is another person's program.

--J.Walia

Hi Valeriy,

Very practical idea, indeed! 5*

Just wondering if you have noticed any performance degradation, or even more specific: did you perform any comparative speed test on your solution?

Thanks and regards,

Alex

Hi Alex.
Thank for your lines

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Image[] im = new Image[100];
        Trace.Warn("Start");
        for (int i = 0; i &lt; 100; i++)
        {
            im[i] = new Image();
            if (i % 2 == 0)
            {
   // assign (i + 20) to Radius on each step
 im[i].ImageUrl = "~/PictureViewer.aspx?Filename=Wolf1.png&Color=00ff00&Radius=" + (i + 20);
            }
            else
            {
                
im[i].ImageUrl = "~/PictureViewer.aspx?Filename=me1.png&Color=0000ff&Radius=" + (i + 20);
            }
            Page.Controls.Add(im[i]);
        }
        Trace.Warn("Finish");
    }
}

Results :

Message ---- From First(s)--- From Last(s)

Begin Load ---- 0.0001694 ------ 0.000017
Start ------------ 0.00018896 ----- 0.000020
Finish -------- 0.00033604 ---- 0.000147
End Load ------ 0.00036228 ----- 0.000023

The size of Wolf1.png = 69kb
The size of me1.png = 44kb

0.000147 second for 100 pictures on page!

modified on Sunday, September 20, 2009 2:45 PM

Nicely. Just wish that IE would get an update that allowed me to do this client-side without all the fuss. Every other major browser can and I'm getting bored in my old age of waiting for IE to define the things the web can do.

Matt Dockerty

More flexible variant
In Default.aspx insert code :

<asp:Image runat="server" ID="MyPicture"  
    ImageUrl="~/PictureViewer.aspx?Filename=Wolf.png&Radius=50&Color=00ff00"/>
<asp:Image runat="server" ID="Image1"  
    ImageUrl="~/PictureViewer.aspx?Filename=me.png&Radius=90&Color=0000ff"/>

In the code-file "PictureViewer.aspx.cs", insert this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Imaging;

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

        String filename = Request.QueryString["Filename"];
        Int32 radius = Convert.ToInt32(Request.QueryString["Radius"]);
        String color = Request.QueryString["Color"];

        if (!String.IsNullOrEmpty(filename) && !String.IsNullOrEmpty(color) &&
            radius > 0)
        {
            System.Drawing.Bitmap bmp = MakeRoundedCorners(filename, radius, 6, 8, "#" + color);
            Response.ContentType = "image/Png";
            bmp.Save(Response.OutputStream, ImageFormat.Png);
        }

    }

    private Bitmap MakeRoundedCorners(String filename, Int32 radius, float ArcThickness, float LineThickness, String colorTranslator)
    {
        System.Drawing.Image im =
         System.Drawing.Image.FromFile(Server.MapPath(filename));

        Bitmap Bmp = new Bitmap(im, im.Width, im.Height);
        Graphics G = Graphics.FromImage(Bmp);
        Brush brush = new System.Drawing.SolidBrush(Color.Red);

        Pen penArc = new Pen(ColorTranslator.FromHtml(colorTranslator), ArcThickness);
        Pen penLine = new Pen(ColorTranslator.FromHtml(colorTranslator), LineThickness);

        if (Bmp.Height >= Bmp.Width)
        {
            for (int i = 0; i < 4; i++)
            {

                AddCorner(radius, G, brush);

                G.DrawLine(penLine, 0, radius / 2, 0, Bmp.Height - radius / 2);
                G.DrawArc(penArc, 0, 0, radius, radius, 180, 90);
                Bmp.RotateFlip(RotateFlipType.Rotate90FlipNone);
            }
        }
        else
        {
            for (int i = 0; i < 4; i++)
            {

                AddCorner(radius, G, brush);

                G.DrawLine(penLine, radius / 2, 0, Bmp.Width - radius / 2, 0);
                G.DrawArc(penArc, 0, 0, radius, radius, 180, 90);
                Bmp.RotateFlip(RotateFlipType.Rotate90FlipNone);
            }
        }

        penLine.Dispose();
        penArc.Dispose();
        brush.Dispose();
        G.Dispose();

        Color backColor = Bmp.GetPixel(0, 0);

        Bmp.MakeTransparent(backColor);

        return Bmp;
    }

    private static void AddCorner(Int32 radius, Graphics G, Brush brush)
    {
        System.Drawing.Drawing2D.GraphicsPath pathCornerUpLeft =
        new System.Drawing.Drawing2D.GraphicsPath();

        pathCornerUpLeft.AddArc(0, 0, radius, radius, 180, 90);
        pathCornerUpLeft.AddLine(0, 0, radius, 0);
        pathCornerUpLeft.AddLine(0, 0, 0, radius);

        G.FillPath(brush, pathCornerUpLeft);
        pathCornerUpLeft.Dispose();
    }
}

How to make pictures with rounded corners in ASP.NET

Introduction

License

Comments and Discussions

0.000147 second for 100 pictures on page!

It took 0.000267 seconds to process 100 files!

0.000147 second for 100 pictures on page!