Generating Images On-The-Fly

Generating images on the fly is very simple in .NET, I can see a few uses to it, serving the client images with watermarks (its very slow, you should cache the results!), generating logos, making text harder to parse by search engines and I'm sure I didn't even scratch the surface.

I've created a small demo, it includes uploading an image, creating a new one containing the uploaded image and some text.

It doesn't handle long text, so don't expect too much from this demo but it does give you the basics.

Here's the whole action.

public ActionResult Process(HttpPostedFileBase file, string text)
{
    string error = string.Empty;

    //get file
    string filename = string.Empty;
    Stream filecontents = null;

    if ((file == null) || (file.ContentLength == 0))
        error = "No file uploaded";
    else
    {
        //get filename
        filename = file.FileName;
        filecontents = file.InputStream;
    }

    Bitmap uploadedImage = null;

    //check valid extensions
    if (!string.IsNullOrEmpty(filename))
    {
        if (!validextensions.Contains(Path.GetExtension(filename)))
            error = "File is not an image";
        else
        {
            //attempt to load image
            uploadedImage = new Bitmap(filecontents);
        }
    }

    //if there's an error, draw it on the image
    if (!string.IsNullOrEmpty(error))
    {
        uploadedImage = new Bitmap(200, 200);
        var g = Graphics.FromImage(uploadedImage);
        g.DrawString(error, new Font("Arial", 8), new SolidBrush(Color.Red), new PointF(1, 1));
    }

    //create new image
    Bitmap newimage = new Bitmap(400, 200);
    var graphics = Graphics.FromImage(newimage);

    //blend into image instead of overriding, this way we can use trasnparent PNGs instead of ignoring the transparency.
    graphics.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;

    //lets get the relative size so it will keep its ratio
    var width = 200;
    var height = 200;

    float ratio = (float)uploadedImage.Width / (float)uploadedImage.Height;
    if (ratio < 1)
        width = (int)(width * ratio);
    else
        height = (int)(height / ratio);

    //lets center the image
    var top = (200 - height) / 2;
    var left = (200 - width) / 2;

    //draw original file
    graphics.DrawImage(uploadedImage, new Rectangle(left, top, width, height));

    //lets determine the size of the string;
    var sizeofString = graphics.MeasureString(text, new Font("Arial", 10));

    //lets center the text
    var texttop = (200 - sizeofString.Height) / 2;
    var textleft = (200 - sizeofString.Width) / 2;

    //add text
    graphics.DrawString(text, new Font("Arial", 10), new SolidBrush(Color.Black), new PointF(textleft + 200, texttop));


    //send to client
    Response.ContentType = "image/png"; 
    newimage.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);

    return new EmptyResult();
}

The code is self explanatory but we'll review it anyway.

1. First thing to take note of is the enctype="multipart/form-data" in the form element, it allows files to be uploaded.

2. Using the HttpPostedFileBase class to access the uploaded file.

3. Validating the file extensions.

4. If an error occured, we're drawing the error message on the image with DrawString.

5. Setting CompositingMode to SourceOver.

6. Calculating the relative maximum size and position for the uploaded image.

7. Drawing the uploaded image with DrawImage.

8. Mesuring the string size with MeasureString, so we can center it.

9. Setting the content type.

10. Saving the result Bitmap to the response stream with the selected ImageFormat.

11. Returning EmptyResult to stop MVC from processing this method.

You can find the demo project at:
https://github.com/drorgl/ForBlog/tree/master/ImageGenerator

Note: some code was written inefficiently for the sake of demo and ease of understanding, for example, CompositingMode and multiple creation of brushes and fonts.

Read More

Tags: Bitmap, HttpPostedFileBase

Dror Gluska July 29, 2012  No comment

Byte Array Comparison Benchmarks

I've recently been tasked with comparing files and hashes, I've wanted to see if there's anything I can do to speed things up.


So, I've looked around for other people's implementations (to save time) and wrote a quick benchmark.


We'll start with the slowest and get to the quickest.


1. ArrayEqualCompare Taken from here.

public bool Compare(byte[] array1, byte[] array2)
{
    return (array1 as IStructuralEquatable).Equals(array2,StructuralComparisons.StructuralEqualityComparer);
}

2. SequenceEqualCompare

public bool Compare(byte[] array1, byte[] array2)
{
    return Enumerable.SequenceEqual(array1, array2);
}

3.SimpleCompare

public bool Compare(byte[] a1, byte[] a2)
{
    if (a1.Length != a2.Length)
        return false;

    for (int i = 0; i < a1.Length; i++)
        if (a1[i] != a2[i])
            return false;

    return true;
}

4. unsafeByteCompare Taken from here.

public unsafe bool Compare(byte[] a, byte[] b)
{
    if (a.Length != b.Length) return false;
    int len = a.Length;
    unsafe
    {
        fixed (byte* ap = a, bp = b)
        {
            int* aip = (int*)ap, bip = (int*)bp;
            for (; len >= 4; len -= 4)
            {
                if (*aip != *bip) return false;
                aip++;
                bip++;
            }
            byte* ap2 = (byte*)aip, bp2 = (byte*)bip;
            for (; len > 0; len--)
            {
                if (*ap2 != *bp2) return false;
                ap2++;
                bp2++;
            }
        }
    }
    return true;
}

5. unsafeIntCompare Taken from here.

public unsafe bool Compare(byte[] b1, byte[] b2)
{
    if (b1 == b2) return true;
    if (b1 == null || b2 == null) return false;
    if (b1.Length != b2.Length) return false;
    int len = b1.Length;
    fixed (byte* p1 = b1, p2 = b2)
    {
        int* i1 = (int*)p1;
        int* i2 = (int*)p2;
        while (len >= 4)
        {
            if (*i1 != *i2) return false;
            i1++;
            i2++;
            len -= 4;
        }
        byte* c1 = (byte*)i1;
        byte* c2 = (byte*)i2;
        while (len > 0)
        {
            if (*c1 != *c2) return false;
            c1++;
            c2++;
            len--;
        }
    }
    return true;
}

6. unsafeSvensonCompare Taken from here.

[ReliabilityContract(Consistency.WillNotCorruptState, Cer.MayFail)]
public unsafe bool Compare(byte[] strA, byte[] strB)
{

    int length = strA.Length;
    if (length != strB.Length)
    {
        return false;
    }
    fixed (byte* str = strA)
    {
        byte* chPtr = str;
        fixed (byte* str2 = strB)
        {
            byte* chPtr2 = str2;
            byte* chPtr3 = chPtr;
            byte* chPtr4 = chPtr2;
            while (length >= 10)
            {
                if ((((*(((int*)chPtr3)) != *(((int*)chPtr4))) || (*(((int*)(chPtr3 + 2))) != *(((int*)(chPtr4 + 2))))) || ((*(((int*)(chPtr3 + 4))) != *(((int*)(chPtr4 + 4)))) || (*(((int*)(chPtr3 + 6))) != *(((int*)(chPtr4 + 6)))))) || (*(((int*)(chPtr3 + 8))) != *(((int*)(chPtr4 + 8)))))
                {
                    break;
                }
                chPtr3 += 10;
                chPtr4 += 10;
                length -= 10;
            }
            while (length > 0)
            {
                if (*(((int*)chPtr3)) != *(((int*)chPtr4)))
                {
                    break;
                }
                chPtr3 += 2;
                chPtr4 += 2;
                length -= 2;
            }
            return (length <= 0);
        }
    }
}

7. unsafeCompare Taken from here.

public unsafe bool Compare(byte[] a1, byte[] a2)
{
    if (a1 == null || a2 == null || a1.Length != a2.Length)
        return false;
    fixed (byte* p1 = a1, p2 = a2)
    {
        byte* x1 = p1, x2 = p2;
        int l = a1.Length;
        for (int i = 0; i < l / 8; i++, x1 += 8, x2 += 8)
            if (*((long*)x1) != *((long*)x2)) return false;
        if ((l & 4) != 0) { if (*((int*)x1) != *((int*)x2)) return false; x1 += 4; x2 += 4; }
        if ((l & 2) != 0) { if (*((short*)x1) != *((short*)x2)) return false; x1 += 2; x2 += 2; }
        if ((l & 1) != 0) if (*((byte*)x1) != *((byte*)x2)) return false;
        return true;
    }
}

8. unsafeLongCompare taken from Here.

public unsafe bool Compare(byte[] a, byte[] b)
{
    if (a.Length != b.Length) return false;
    int len = a.Length;
    unsafe
    {
        fixed (byte* ap = a, bp = b)
        {
            long* alp = (long*)ap, blp = (long*)bp;
            for (; len >= 8; len -= 8)
            {
                if (*alp != *blp) return false;
                alp++;
                blp++;
            }
            byte* ap2 = (byte*)alp, bp2 = (byte*)blp;
            for (; len > 0; len--)
            {
                if (*ap2 != *bp2) return false;
                ap2++;
                bp2++;
            }
        }
    }
    return true;
}

9. memcmpCompare Taken from here.

[DllImport("msvcrt.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int memcmp(byte[] b1, byte[] b2, long count);

public bool Compare(byte[] b1, byte[] b2)
{
    // Validate buffers are the same length.
    // This also ensures that the count does not exceed the length of either buffer.  
    return b1.Length == b2.Length && memcmp(b1, b2, b1.Length) == 0;
}

You can find the test project at
https://github.com/drorgl/ForBlog/tree/master/CompareByteArray

And the benchmarks at
http://uhurumkate.blogspot.com/p/byte-array-comparison-benchmarks.html

Read More

Tags:

Dror Gluska July 28, 2012  1 comment

jQuery One Concurrent Request

Did you ever need to make sure only one request is executed at one time?


For example, a quick search textbox, while you're typing the search phrase, it keeps on asking for answers, but one of them might arrive later than the last key pressed, giving you wrong answers. 


This little snippet keeps track of the urls you requested, it aborts all previous ones and thus giving you only the latest result.

Example usage:

ajaxOneRequest("http://localhost/search", "GET", "jsonp", { "q": $('#searchbox').val() }, function (data)
{ 
    //do something with results
});

<input type="text" id="searchbox" onkeydown="searchclick();"/>

var ajaxOneArray = new Array();
 
function ajaxOneRequest(url, type, dataType, data, onsuccess)
{
    if (ajaxOneArray[url] == null)
        ajaxOneArray[url] = new Array();
             
    ajaxOneArray[url].forEach(function (req)
    {
        req.abort();
    });
             
    ajaxOneArray[url] = new Array();
             
    ajaxOneArray[url].push( 
        $.ajax(
        {
            type: type,
            dataType: dataType,
            url : url,
            data: data,
            success: onsuccess
        })
    );
}

Read More

Tags:

Dror Gluska July 23, 2012  No comment

Thread.Yield() and Locking mechanisms

I've started writing this article about explaining what Thread.Yield() does, first I wrote two spinlocks, one using an empty loop and one using Thread.Yield, it showed that Thread.Yield was actually working faster because it releases the rest of the allotted time-slice by the scheduler, allowing other threads to finish until the lock can be acquired.

However, I've started wondering how different locking mechanisms affect our daily multi-threading work and decided to make it a comparison project for future reference.

There's a lot of confusion with Thread.Yield, is it the same as Thread.Sleep(0)? is it like Thread.SpinWait? is it a NOP? 

I wrote 6 spinlocks, one with NOP, one with Thread.Yield, one with Thread.Sleep(0), one with Thread.Sleep(1), one with Spinwait, one complex (containing the other types and imitating Microsoft's implementation) and used Microsoft's implementation of SpinLock, they did a great job there by including Yield, Spinwait, Sleep(0) and Sleep(1) the longer the wait took, the less frequently they try to acquire the lock, good job!

I've also implemented locks based on Monitor.Enter/Exit, Mutex (WaitOne/ReleaseMutex),   Semaphore (WaitOne, Release) and SemaphoreSlim (Wait, Release) for the sake of comparison.

Take a guess which one is faster, we'll see the results later.

So what are the waiting methods? how do they work? 

SpinWait, its the simplest one, basically its a loop (hence the iterations parameter) that occupies the CPU (or Core its running on to be exact), if you do a SpinWait in a loop, you'll see its using the maximum CPU it can. I don't think there are any other implementations you can use it other than locking mechanisms and so says Microsoft's documentation.

int i = 1;
while (Interlocked.CompareExchange(ref _lock, 1, 0) != 0)
{
    Thread.SpinWait(++i);
}

Yield, tells the scheduler that the current thread is done with its allotted CPU slice, you may execute something else on the same core.

while (Interlocked.CompareExchange(ref _lock, 1, 0) != 0)
{
    Thread.Yield();
}

Sleep(0), according to the documentation it tells the scheduler that the current thread is done with its allotted slice, BUT when you try to benchmark it, its running longer than Thread.Yield. so I'm afraid I don't have a good answer for you.

while (Interlocked.CompareExchange(ref _lock, 1, 0) != 0)
{
    Thread.Sleep(0);
}

Sleep(1) tells the scheduler to stop executing the current thread until timeout has reached and then marks it for execution, which will add a bit more time until the next schedule cycle.

while (Interlocked.CompareExchange(ref _lock, 1, 0) != 0)
{
    Thread.Sleep(1);
}

What are the locking methods?

Monitor is a fine grained locking mechanism, provides a lot of options if you want to wait or wake up a waiting lock, it should be used if you have locks waiting and want to control how many you want to wake up (Pulse/PulseAll).

//Enter
Monitor.Enter(_lock);

//Exit
Monitor.Exit(_lock);

Mutex is a system-wide locking mechanism, used to control flow in inter process communication or shared memory implementations, its a wrapper for system calls, which is actually slower than pure CLR implementations, if you got to a point you need to use Mutexes, this article is not for you. :-)

//Create
Mutex _lock = new Mutex();

//Enter
_lock.WaitOne();

//Exit
_lock.ReleaseMutex();

Semaphore is more of a resource limiting lock, its using the kernel for locking so its similarly slow as Mutex, you initialize the semaphore with how many slots you want and then ask for one and release one when you're done, when the limit is reached it will wait until one lock is released.

//Create
Semaphore _lock = new Semaphore(1, 2);

//Enter
_lock.WaitOne();

//Exit
_lock.Release();

SemaphoreSlim is like Semaphore but it doesn't use the kernel, so its relatively fast, but not as fast as one might want, if you need to use very fast semaphores, maybe you should experiment with your own implementation using SpinLock..

//Create
SemaphoreSlim _lock = new SemaphoreSlim(1, 2);

//Enter
_lock.Wait();

//Exit
_lock.Release();

I wanted to see how safe these locks are so I've added an Interlocked.Increment and Interlocked.Decrement and checked that the value is not larger then 1 inside the locked code.

Microsoft added Thread.BeginCriticalRegion() and Thread.EndCriticalRegion() to their implementation to avoid having the lock in an inconsistent state, but its beyond the scope of this test.

I think the results speak for themselves and next time we have to select a lock for a faster application, we can be more educated about our decision. 

Graphs - http://uhurumkate.blogspot.com/p/locking-benchmarks.html

Project - https://github.com/drorgl/ForBlog/tree/master/LockingTests

Read More

Tags:

Dror Gluska July 21, 2012  No comment

Website Performance Loading and Optimization

I've recently been tasked with writing a high performance website, it needed to have all the bells and whistles, cached database access, scripting, custom htmls etc'.


I've written a basic implementation and started working on performance, first I needed a load.


I've found Apache JMeter, one of the best web load testing programs I've worked with so far, I could send a custom HOST header, do multiple logins, multiple cookies, basically test every page on the website for problems.

Taken from http://www.java-forums.org/blogs/jmeter/

But the results don't tell you much, if your home Action is slow, cool, I can see it, if the application takes 100% CPU, cool, I can see that too, but what's causing the slow downs?


This is where Visual Studio's Performance Profiler comes in.


My project has a lot of dependent projects, its ok if you see a WCF call is slow, but seeing exactly what's executing slowly is even more valuable.


At first I've tried using the Wizard, but every time I started profiling Visual Studio would hang, my solution? Attach/Detach, once the project has started with all its components also running, right-click on the Profiling session, Attach-Detach and attach the desired projects, then on Modules view, you can drill down application->method->method until you know exactly what's going on.


For example, when you're looking at Functions section, it shows you all the functions it caught, Inclusive is if the method is up in the stack and exclusive is if that specific method is the slow part, look at both, it will give you an overview on the problems, the exclusive will show you specific methods and the inclusive will show you certain paths in the execution tree which are slow in your applications.


I can't thank Microsoft enough for including this great tool, it saved me countless hours and helped me deliver a high quality and performing code.

Read More

Tags:

Dror Gluska July 20, 2012  1 comment