The MVC Controllers
The only functionality of the "HomeController" implemented in the "HomeController.cs" is to load the "Index.aspx" page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Base64Img.Controllers
{
[HandleError]
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
}
}The "ImageController.cs" implements the controller that loads the image and passes it in "Base64" format to the web browser.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
namespace Base64Img.Controllers
{
public class ImageController : Controller
{
[HttpGet]
public ActionResult GetBase64Image()
{
string path
= Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Images")
+ "\\" + "Tiger.jpg";
FileStream fileStream = new FileStream(path, FileMode.Open, FileAccess.Read);
byte[] data = new byte[(int)fileStream.Length];
fileStream.Read(data, 0, data.Length);
return Json(new { base64imgage = Convert.ToBase64String(data) }
, JsonRequestBehavior.AllowGet);
}
}
}The action method "GetBase64Image" takes no parameter, it reads the image file located in the "Images" folder and converts it to "Base64" format. It then sends the image to the browser as an "JsonResult".
The "Index.aspx" View
This MVC 2 application's single view page is implemented in the "Index.aspx" file.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Base64 Image Loader</title>
<link rel="stylesheet"
href="<%: Url.Content("~/Content/Styles/Site.css") %>" />
<script
src="<%: Url.Content("~/Content/Scripts/jquery-1.6.1.min.js") %>"
type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
var imageUrl
= "<%: Url.Action("GetBase64Image", "Image") %>";
var imgs = null;
$(document).ready(function () {
if ($.browser.msie) {
var browserMsg
= "Your browser does not support Base64 image"
$("#divBrowserInfo").html(browserMsg);
$("#btnClearImage").attr("disabled", true);
$("#btnLoadImage").attr("disabled", true);
}
var displayImage = function (base64Data) {
var imag = "<img "
+ "src='" + "data:image/jpg;base64,"
+ base64Data + "'/>";
$("#divImageHolder").html(imag)
};
$("#btnLoadImage").click(function () {
if (imgs != null) {
displayImage(imgs.base64imgage);
return;
}
$.ajax({
cache: false,
type: "GET",
url: imageUrl,
contentType: 'application/json',
dataType: "json",
success: function (data) {
imgs = data;
displayImage(imgs.base64imgage);
},
error: function (xhr) {
alert("Error occurred while loading the image. "
+ xhr.responseText);
}
});
});
$("#btnClearImage").click(function () {
$("#divImageHolder").html("");
});
});
</script>
</head>
<body>
<div id="divBrowserInfo"></div>
<div id="divImageHolder"></div>
<div>
<button id="btnClearImage">
Clear Image</button>
<button id="btnLoadImage">
Load Base64 Image</button>
</div>
</body>
</html>