dyco

=桶言桶語=

2009-03-05

透過Jquery和ExifMetadata 截取圖片的EXIF資訊

摘要:透過Jquery和ExifMetadata 截取圖片的EXIF資訊

因為工作上的需求,需要顯示jpg檔裡的EXIF
後來找到了一些Sample Code

參考:http://www.codeproject.com/KB/graphics/exiftagcol.aspx

 我將他稍微的修改了一下,並加上了Jquery Ajax功能

1.首先引入Lib

 

2.引入Js

3.建立一個Default.aspx,並輸入下列程式code

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 

<!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>未命名頁面</title>
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <style type="text/css">

        .ajaxtooltip{
        position: absolute; /*leave this alone*/
        display: none; /*leave this alone*/
        width: 300px;
        left: 0; /*leave this alone*/
        top: 0; /*leave this alone*/
        background: lightyellow;
        border: 2px solid gray;
        border-width: 1px 2px 2px 1px;
        padding: 5px;
        }

</style>
<script type="text/javascript" src="js/ajaxtooltip.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" title="ajax:General/GetExifInfo.ashx?i=img/1.jpg">查看</a>
    <a href="General/GetExifInfo.ashx?i=img/IMGP2074.JPG.JPG">查看</a>
    </div>
    </form>
</body>
</html>

 

4.建立一個泛形General/GetExifInfo.ashx
 

 

 

 

using System;
using System.Web;
using ExifLibrary;

/// <summary>
/// 拿取jpg的EXIF資訊
/// </summary>
public class GetExifInfo : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {        
        context.Response.ContentType = "text/html";
        string img = context.Request.QueryString["i"];
        ExifLibrary.ExifInfo exif = new ExifLibrary.ExifInfo();
        exif.GetImagePath = context.Server.MapPath("~/" + img);
        string dis = exif.Exif_Display();        
        context.Response.Write(dis);
    }
  
    public bool IsReusable {
        get {
            return false;
        }
    }

}

5.顯示結果(當Mouser 移到Link上時)

 

檔案下載:ExifLibraryTest.rar   (請自行將jpg檔放入img資料匣後,修改Defulat.aspx圖檔名稱)