andrewlocatelliwoodcock

Thoughts on Software

Base64-encoded strings and the Image tag

with 4 comments


I have recently come across a situation where I wanted to have an image tag in a View but want to use a Base64-encoded string containing the image data rather than a URI to an image file. Chrome and Firefox both support using a Base64-encoded string in the src attribute of the image tag but Internet Explorer, naturally enough, does not and while I would dearly love to drop Internet Explorer support from my web sites, I cannot.

ASP.Net MVC to the rescue!

It turns out the answer is simple enough: create a Controller Action method with a return type of FileResult and build and return a FileContentResult object at run-time from a Base64-encoded string, which can come from anywhere, including being auto-generated.

Simples.

Some sample code to whet your appetite:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;

namespace Clix_n_Brix.Services.Controllers
{
    public class ImagesController : Controller
    {
        //
        // GET: /Categories/

        public FileResult TestImage()
        {
            var image = SampleImage;
            return Imaging.ToFileResult(image, "jpg");
        }

        public FileResult Image(string imageName, string format)
        {
            // TODO: get base64 string for image from Clix-n-Brix service
            var image = SampleImage;
            return Imaging.ToFileResult(image, format);
        }

        public FileResult Thumbnail(string imageName, string format)
        {
            // TODO: get base64 string for thumbnail image from Clix-n-Brix service
            var image = SampleImage;
            return Imaging.ToFileResult(image, format);
        }

        private const string SampleImage = @"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8KCwkMEQ8SEhEP

ERATFhwXExQaFRARGCEYGhwdHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e
Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCABQAFADASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0GB3i
j3rhgByprhPiP4z+G1t/oGuXFpdSgfPbCD7Rtz68EA/jmuD+M3xRvo5P+EV8OuIbqYD7RcBuUDDI
UHsSCCT2BFc34c+B2ta1axale61bQQzjfu2M7EHPPb0r0Jybdo6nMo6F+SD4E6ncLNBq99oc/wD0
yikKE+4ZW/Qiq15oPhy3LTab480G5tgM/vJDHL9PLAJNR3P7P/iFWxa6rZTLn5SQVJ/CuA8XeCdf
8NXs1ve2pkWHAaWEb0GRnqOnFc05cvxIpU1I6XVLZL2azt7K9tbtWl++kgAHrnOMDFd7eXWmaFp0
c0ssamTCKqpgtwT+X+Ir56yQcbiDTvNlBADufQA1xVqftWnfQ6qUo04OPLdnqlzqlzcedp8Njvhl
l8x5VftnPp7etepfs9XWleF9Vna6upjHdKRkgfKxI5/SvmK2/tCUM8Juyo6lATWhZT6/bsDHc30I
7Fo3x/WrjGC0Qve3sfdXiXxHpscrXMdzHJBbKzTOpyFA/mfYVjaP8SvB+pfvFvACo277i3aMD23M
oH618yeGviJ4409/9C8R6W8nZbxEXP8AwKVQP1rsIv2jPiXpVug1DTtIurUnAkNqrRufZ0O0/hWk
IO+rIbXY8m8B2Nx4m8dWyTs0klzcmSY5/hGXf9Aa+wNPjA0qG3iO0DMYC9gQcflXzB+zpGJfiCHx
kR2srfTdhf8A2avqvwKpm01bmQcOSBn24P8AKuun8NyEtTTsrQRxebJ0UYGa8hv4ZNZ127uF+aF5
mZR2Izx+let+Mr4af4funDAN5ZC/U8D9cV55oQijtIzGpckD8683M6vLFWPRwNO8igvgTw5d4a+0
i2mdu/l4P6VDrHgfwLpMNu50W1gaWQRrK+SoY/dBGe5GK6ex1C4W6lUmBihKkY46Z6+tVPEMJ1TT
HtJdhSVgck5AI6Zx/nmvAVeSkuZnu/VYyjeMUHha0tEjuLFbG2tpIG2skSBQQQCDjHvV6+s4rGRZ
EiiLHkfKDWHZw31r4gFyqsY5rcJO3qy8A/lWrf3O6I884wTRKet0zWFHSzRl/EbVbLU/h3q9je29
vvW1kMTGMEhguRj34zXyPDKEOY5nhO07gBkMc8Djtj1r2n4vauU0iazjc+ZcHylHPIPXp7A/nXkS
6HftLcJDE0xhRZD5akkqxABx+I46+1e1hHJ07yZ87mEIRq2idl+z5ewWnjmQTNjzrORE92DKwH6V
9BW93rdvKtzaTXkMK/8ALKX/AFbDrwD938q+Q9D1O70bVbfU7CXy7i3bcjfzH9K+grPx1pN5oFtq
N1rzRCX5Ss8gXa4HK4UZ4/qK9SjNctjzmjrfHms6nq+iNYwzL9paZdgOELAcgdcdRyelSeGrq1j8
PQXQcEtFu68jivOfE2uQxaa2qwsskCxF0mZsmTcOAB6GvOtG+ImvadYyWZaK5R3Zt0gO4ZOSMjtz
XLmFH2iSW52YOvGk/e2Pfm1m2W/u4lUssqiUHIHUc/0qeTUovs6nTilzJIoZgPuxn1NeB6d44gub
/wA3W4JVQAhGtm5Un2J5rr9M+JOl2mnSWWl2lzdMimRpZQIxx69fXsO9eJVwUtLK57tLMqb62Ox1
HxLe6Jqd087i6iggWdlYjcY84fC+1V9f8aWrJt0zdf3EkZdYYF3tjGckDoPrivLfEeqa5rWohUng
R2tWlnAHkhEbtukwWGME8AflXO6ZNDDcQiYzLc26bVFrtPmhiSWZjkdGwcgjGK61goNJs4J5nJNq
Gx0l/Fql/cpql9A5ml8y3hiSPz0gZsDdJtyBw3KnLZxxVaMwXFrey2sLSW9vaRRTn7StmscwkHzq
h6Z5I685PGcCu1zp0yzPb3H2DTWeWW1t1Zo5Fn2AbC/IweDuJx9K1bHUZhD/AGbqk1tZ3EULMLaV
BMtxEIiVSU9C2VUqxORk9OBXWlZWR5jk5O7PPdSs5rC9ltJ1w8bEexHYj2qvnjHavVfijoFteaam
qWLGS7hBEgBB3R+v1HX6Zryr8K6atNwlYyTujptc1xbnwtpOlRNnYhac/QkKPy5/EVzpPNWYvsz2
iIkE0l35pLYPymPAwAPXOf8APS7qWlRWmrCxZpkYlMggOyFxkLgdSMjJz+Haocr7jszIAJbAGSeg
rpdKttNXS5Vlu5MXcYhebyhttZPMVsMM5IIXGR2J4OKoWmnT2+u2ttiO4d3DRiJhIjdcHI4K5HPP
QHOK7f4Z3mh2kMms63YWlzcpf/6OgYL50mCSxHTau4YAA5YelRJ2LhFt2Og8IfC2XU38zUr6GOGS
wSOOWSF2aMkKMYJXsDt5BGehrV1b4NeINJtpZNDktNZtxC0bWRjMRnymOTnkggEAHPHBr0fRPiRC
kkcOp6bFtLE4RcNGB0ODnP6V3K6jZ3saXljKpRxuDL3rOFSE9Ezerh50viWh8Zajp4t9CtCY4bbU
ReiCbTIxvaFiDtZkYlix2spUnjHQZrT8NSS3OoSwarbRrKZ1tL/bZgFlKlUVucKF8vdwOSF6kVvf
tAXOm/8ACSak9sH0+V54hO1tFzcyFGLEnI4ACfUtk1y9hMtnZSpJdyNNo0bTAKNpdpFAKycn7rlV
496tPQwZDrnjS1KPHp0JYsf4lxGB9Op/HFcPI+9mbaq7iTgDAH0pvNABradWU3dmaVh0ZZGDo21h
3HBroNC1e1ElpaXljbrEjnfcRRfvgCuCRzgt0wT0rnvpTlJVgwyCD1rNq407HS2V3c2kMVrfW8vl
m8jNvCxMe4BiSpOMlckHtzz61YS3vbiOGW21K0tdPjvCCqSZEDs2FUKOWO1QcgHPOT1rnrXUp476
G7uEjvWilMoW4yysxxnOCCeg71ox6vpckENtNowhjjdn3W0xV3YjALFg2cHJA4HNS4voO6Oi0+bx
L5t7cLMzwSQterd26q8UYUtnPTrhgR1yBXXeDvioNKSW6eO7nslVfMhwokJ6eao3dM8Ee459PKNP
n0+PUI/tL3jWggMREZVHBYENjORjLMffpU8V8ul6hc3elRttbCQ+cFcrH3DDGCSBg+xPrSUFe6Rp
7eXLy30Oj8U6vf8AiXUGu7aa2jjkla5iivGQsseAoIVgQn3CTjrweRXOeK9Qu3upbQPGsMhVpWiI
23DjG6Q4/vEZ/Ko7HV4rTxFc6ubUzeYJvKjlfcF3gqNxIO4AMeO9R3us3V3ozafdPLM5uvP8xnyA
NuNoHYd+OParszO6P//";

    }
    public class Imaging
    {

        public static FileContentResult ToFileResult(string base64String, string format)
        {
            var imageBytes = Convert.FromBase64String(base64String);
            var image = new FileContentResult(imageBytes, format);
            return image;
        }

    }
}

You can replace the contents of the constant SampleImage with another Base64-encoded string before running this code but it should work as is. Once running, navigate to /Images/TestImage and you will see a page with the image described by the Base64-encoded string embedded.

You can convert images to Base64 strings online here or convert them programmatically in C# as described in my next post.

Written by andrewlocatelliwoodcock

April 26, 2011 at 16:35

4 Responses

Subscribe to comments with RSS.

  1. […] a comment » Following on from yesterday’s post, exactly how do you encode a .Net Image object as a Base64 […]

  2. […] a previous post, I discussed using MVC’s FileResult action return type to return an Image re-hydrated from […]

  3. Don’t forget about the Web Essentials Visual Studio Extension that will base64 images for you directly from within the CSS editor!

    http://visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f

    John Bubriski

    January 19, 2012 at 13:42


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: