Base64Image应用

最新推荐文章于 2024-05-20 22:28:51 发布

weixin_33941350

最新推荐文章于 2024-05-20 22:28:51 发布

阅读量70

点赞数

文章标签：测试 xhtml json

The MVC Controllers

The only functionality of the "HomeController" implemented in the "HomeController.cs" is to load the "Index.aspx" page.

Collapse | Copy Code

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.

Collapse | Copy Code

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.

Collapse | Copy Code

<%@ 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>

weixin_33941350

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Base64Image应用

The MVC ControllersThe only functionality of the "HomeController" implemented in the "HomeController.cs" is to load the "Index.aspx" page. Collapse | Copy Codeusing System;using System.Collecti...
复制链接

扫一扫