Thursday, February 6, 2014

Tip: Image(binary) to Base64 conversion for DataURI using VisualStudio

Below are the steps needed for this conversion:
  1. Open Visual Studio, add new resource file (resx) item.
  2. Add existing images (from filesystem) to this file by clicking, AddResource -> Add Existing File. 
  3. Select image on window (resx) - go to properties tab,
  4. change property: Persistence to 'Embedded in .resx' and save the file.
  5. Now open this file (resx) with Notepad or any text editor (easy way is renaming file to .xml) and
  6. copy the base64 encoding for respective image and use it as DataURI for the <img> tags.
  7. Create a HTML file with <img> tags filled with DataURI,
  8. save this html file and open it directly from filesystem.
  9. (IE8 not works, so try hosting this page on any web server).

Ex: 
<img src="AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D"/>

Note:
  • Be careful while adding the header, image type should match.
  • Careful IE8 limits the image size to 32KB. try to use appropriate sizes for IE8.
  • IE9 now accepts upto 4GB of dataURI.


No comments:

Post a Comment