Tuesday, August 2, 2011

Asp.Net: Ajax accesses compressed DataURI Image


    Here i will explain, how to get image data using Ajax technique. This sample post shows an example of what can be possible with
DataURI, base64 compression and Ajax.

Covering the topics:
  • how to convert image to base64,
  • compress this data and access it via ajax from browser and
  • assign it to <img> tag as DataURI.

    By placing the images in a file called Resource.resx, we can easily generate base64 encoding. For further information on Resource file, check my previous post and check this tip on my other blog for full details: Image to base64 conversion.

Compression support depends on the browser. If it supports, we can use either GZip or Deflate to compress the data. Using AJAX, request this base64 data and assign it to <img> tag as source, with appropriate headings added (datauri, imagetype etc).

These are the files which I have used for this sample:
  • webForm (aspx) which contains Ajax code and <img> tags.
  • Handler file (ashx) which handles the ajax requests, compresses the base64 data from Resource.resx file.
  • Resource.resx file is a xml file, contains the embedded images in base64 format.

  • If the image size is small, around <5kb, don't use the compression, as it takes extra space instead of lowering.
  • IE8 accepts data URIs with a maximum length of 32 KB.
  • After the image is compressed, we gain around 2KB of space.

download the code files as zip from here.

No comments:

Post a Comment