ImageResizer, AzureReader2 and well… Azure (duh!)

So, as part of my on-going project I’ve recently made the decision to shift all my images (uploaded by ME and my USERS) to Azure Blob Storage, instead of the quite frankly ridiculous ‘unique folder system’ ™ that I had been using.

Now, originally I’d been using ImageResizer which was working well, buut, it didn’t work (the way I was using it) with Azure Blobs (at least not in an efficient way).

So.

I do the standard of searching for ‘ImageResizer Azure’ on google, and first on the list: AzureReader plugin, which being me, before I’ve actually clicked on the link I’ve switched to Visual Studio and added the AzureReader nuget package to my site (which is MVC4, using Azure SDK 2 by-the-by). Whilst that installs, I switch back to the browser, and read this: See AzureReader2 if you're using the Azure SDK 2.0. ah.

Uninstall the AzureReader package, install AzureReader2 package.

Bump.

That’s the sound of me hitting a wall. The documentation for both the AzureReader and AzureReader2 plugins are – well – minimalist, sure, they explain about the config settings (and the AzureReader page even explains how to add to azure) but not really on how you would use it. LUCKILY it’s pretty simple, so here goes, this is how to setup AzureReader2 with ImageResizer on an MVC4 Website.

1. Create a new Mvc4 site

(obviously if you have a site already, you can skip this bit) I’m going with an Empty site in my one (with no test project – basically because I’m lazy).

image

2. Add the nuget packages you need

  • Windows Azure Storage (>= 2.0.4.0)
  • ImageResizer Web.Config Installation for MVC
  • ImageResizer Web.Config Installation
  • ImageResizer.Mvc – MVC-friendly utilities
  • ImageResizer
  • ImageResizer.Plugins.AzureReader2 – Process images from the Azure blobstore
  • Image Resizer Fluent Extensions for ASP.NET MVC
  • Image Resizer Fluent Extensions

(if you search for and install the ones in blue, you will get the others installed)

3. Start the Storage Emulator

(Yes – I have made a big assumption here that you have the Azure SDK installed – if you don’t – now would be a good time to install it, then come straight back here)

4. Create a container on the development storage

Easiest way to do this (for me) was to use Visual Studio’s Server Explorer:

image

Give it any name you want, I’ve gone with: imageresizer-example

5. Upload an image to your blob container

Double click on the container, and click on the Upload Blob button:

image

Then select a biggish image, and whack it in…

So now you should have something like: image

6. Web.Config Edits

They gotta be done, and this is where the meat is, if we go down to the bottom of our Web.Config file, we should see a ‘resizer’ element, which will look something like:

<resizer>
  <plugins>
    <add name="MvcRoutingShim" />
  </plugins>
</resizer>

We need to add our AzureReader2 plugin:

<add name="AzureReader2" connectionString="UseDevelopmentStorage=true" endpoint="http://127.0.0.1:10000/devstoreaccount1/" />

This is the minimum you need to get working.

7. Run

Press CTRL+F5 and ignore any errors you see – there’s no page to display in an empty solution – but that’s of no concern to us. My one started up on port 4598, so replace 4598 with whatever your port is.

In the browser you have open – navigate to: http://localhost:<PORT>/azure/<container>/<file>, so in my case I’m going to: http://localhost:4598/azure/imageresizer-example/example.jpg

Did you get a 404 error? This is because the container we created earlier doesn’t have public permissions. To change this, we’re going to make it public at the blob level, (you can go container if you really want to).

8. Change public access

Right click on the container in the server explorer within visual studio, and go to the ‘Properties’ page. Here, set the PublicAccess property to ‘Blob’:

image

Go back to your browser and refresh the page

One thing to note is that the URL despite what you typed in, now points to the Azure Blob url directly:

image

This is because we’re not doing any modifications to the picture, so ImageResizer has just forwarded us directly to the blob, which is nice. But lets get ImageResizer doing a resize:

9. Resizing

Very VERY simple. Just add ?width=200 to the end of your url (obviously if the picture you are pulling isn’t at least 200 pixels wide this will have no effect). So:

http://localhost:<PORT>/azure/<container>/<file>?width=200,

image

Aceness!

Now – yes – I’m using Azure (now), but personally I’d rather hide that fact so if I decide to go S3, I don’t have to update all my URLs, luckily – this is all in the config, so last thing:

10. Web.Config changes (again)

Let’s edit our plugin line and add the ‘prefix’ attribute.

<add name="AzureReader2" prefix="~/cloud/" connectionString="UseDevelopmentStorage=true" endpoint="http://127.0.0.1:10000/devstoreaccount1/" />

now all the links will look like:

http://localhost:<PORT>/cloud/<container>/<file>?width=200

which is pretty cool.

 

Conclusions

ImageResizer is – well, Awesome. I’m personally going to be getting a license soon (I’ve not used this in production yet), but I can’t see any reason why I wouldn’t.

If you need ImageResizing I have yet to find a better alternative – and it’s really not that expensive (by the by – full disclosure – I have not received anything to influence me. This is all from personal research)

I’ve put my files here: http://sdrv.ms/V4DSnV but you’ll still need to create the azure container yourself. 7Zip appears to do a weird unzip and doesn’t create the empty folders as folders, so if it doesn’t load with a ‘missing app_data’ folder error – that’s why.

 

Addendum

I believe – if you are looking for a connection config element for a production system you want something like this:

<add name="AzureReader2" connectionString="DefaultEndpointsProtocol=https;AccountName=NAME;AccountKey=KEY" endpoint="http://NAME.blob.core.windows.net/" />

Though – this is speculation – I can’t confirm the results as I’m not running this against a production server at the moment. I’ll let you know if it’s NOT that.

Print | posted @ Tuesday, February 26, 2013 12:36 AM

Comments on this entry:

Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by Bob Pease at 8/26/2014 6:08 AM

Hello there! Your tutorial has been very helpful! I have really struggled to find any good examples online.

However, I'm running into a slight issue. When I enter the URL in my application (http://127.0.0.1:81/cloud/bobbo/engagement-robert-pease-photography-2.jpg) I actually get redirected to the blob storage url (http://127.0.0.1:10000/devstoreaccount1/bobbo/engagement-robert-pease-photography-2.jpg).

Do you have thoughts on what I might be doing wrong? I've downloaded your sample project and poured over the web.config and references. The only difference is that I am on newer versions (ImageResizer references are 3.4.3 and azure storage references is 4.2.1)

Thanks for any help you might be able to offer!
Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by Chris at 8/26/2014 9:55 AM

I have the same effect on my system and as far as I know - it's because ImageResizer isn't doing anything, and as a consequence just redirects.

You can make it say the 'cloud' version by putting something like ?w= at the end of your url, other than that I don't know of any other way.

I've just disassembled the most recent version of the plugin, and it has proved as useful as the documentation online. There are only 2 parameters we don't see and neither of them will help as they are both to do with Virtual Path Providing - specifically, turning it off as it's default is on.

I'm sorry it's not much help. I reckon it wouldn't be too hard to add it into the provider, but alas not having the source code it's tricky :|
Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by Dharmik at 8/29/2014 7:46 AM

I've followed all steps but still images are not resizing.
Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by Chris at 8/29/2014 9:06 AM

Hi Dharmik, I'm not sure what to say to help with that. You might need to ask on StackOverflow with examples of your code and what you've tried.
Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by OC.CTO at 10/11/2014 4:22 AM

Chris, Thanks for taking the time to put this in the world. Very helpful!

What a great post, I have looked at this 5 or 6 times and finally implemented this technique over using the ImageResizer to resize images then save them to blobs during the upload.

FYI - I faced the following error, because 'WindowsAzure.Storage 4.3.0' depend(s) on Microsoft.WindowsAzure.ConfigurationManager 1.8.0.0, probably due to the order I installed NuGet packages!?
---------------------------------
Could not load file or assembly 'Microsoft.WindowsAzure.Configuration, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference.
---------------------------------
I resolved this easily for now by updating the bindingRedirect tag in the web.config as such:

<dependentAssembly>
<assemblyIdentity name="Microsoft.WindowsAzure.Configuration" publicKeyToken="31bf3856ad364e35" culture="neutral" />

<bindingRedirect oldVersion="2.0.0.0" newVersion="1.8.0.0" />
</dependentAssembly>


Gravatar # re: ImageResizer, AzureReader2 and well… Azure (duh!)
by Chris at 10/13/2014 9:05 AM

Hi,

There is a lot of nuget weirdness that seems to happen whenever a package requires the Azure packages. Generally, I add WindowsAzure.Storage first, which gets the most up to date versions of all the packages, and *then* put in the other packages.

If you can update to the latest azure stuff, I would, I think you'll get better capabilities with it, but the redirection technique might still prove useful - (see http://stackoverflow.com/questions/19611270/imageresizer-azurereader2-doesnt-work-with-latest-azure-sdk-2-1-0-3/19679559)

Cheers!
Post A Comment
Title:
Name:
Email:
Comment:
Verification: