نمایش تصاویرموجود در پایگاه داده به صورت Thumbnail

فرض کنید میخواهیم در یک صفحه، تصاویری که در پایگاه داده هایمان موجود است را به صورت thumbnail نمایش دهیم. برای انجام این کار ابتدا کافی است تا یک صفحه وب aspx ایجاد کنیم. سپس در متد Page_Load در کد پشت صفحه تصویر تمام اندازه ای را که از پایگاه داده ها دریافت نموده ایم کاهش اندازه دهیم و آن را روی صفحه نمایش دهیم.
در متد Page_Load این مراحل را طی میکنیم:
1- یک شیء از کلاس System.Drawing.Image با استفاده از آرایه ای از بایتها که از پایگاه داده دریافت نموده ایم ایجاد میکنیم
2- از یک ثابت برای تعریف ارتفاع thumbnail و محاسبه عرض برای نگهداری نسبت تصویر استفاده میکنیم
3- از متد GetThumbnailImage شیء image برای گرفتن تصویر thumbnail استفاده میکنیم
4- تصویر thumbnail ایجاد شده را درون یک MemoryStreamبارگذاری کرده و آن را در صفحه نمایش میدهیم.
برای نمایش thumbnail ها از یک کنترل Datalist با تگهای img درون ItemTemplate استفاده کرده و عمل مقید سازی را بر روی خصوصیت src تگها انجام میدهیم.
بسیار خب ، ابتدا بهتر است کدهای مورد نظر خود را قدم به قدم توضیح دهیم. نکته این که ابتدا مثالی میزنیم که در آن شناسه یک تصویر را از کاربر دریافت کرده و thumbnail آن را نمایش میدهیم. نکته این جاست که ما در این برنامه از این صفحه بعدا استفاده خواهیم کرد. در حقیقت این صفحه وظیفه تبدیل بازگرداندن thumbnail آن تصویری را دارد که ما شناسه اش را به صفحه میدهیم.
لذا پس از نوشتن این صفحه ، در مثال بعدی تنها کافی است لیست شناسه ها را دریافت کنیم و به ازای هر شناسه یکبار این صفحه را فراخوانی کنیم.
برای نوشتن کد صفحه اول،ابتدا درون متد Page_Load متغیرهای لازم را تعریف میکنیم:

OleDbConnection dbConn = null;
OleDbCommand dc = null;
byte[] imageData = null;
String strConnection = null;
String strSQL = null;
MemoryStream ms = null;
System.Drawing.Image fullsizeImage = null;
System.Drawing.Image thumbnailImage = null;
int thumbnailWidth;
String imageID = null;

نکته اینجاست که ما فرض را بر این گذاشته ایم که کاربر بتواند با استفاده از query string شناسه یک تصویر را به صفحه بفرستد و Thumbnail آن را ببیند. پس ابتدا مقدار این متغیر را بدست می آوریم:

سپس ارتباط به پایگاه داده ها را ایجاد و آن را باز میکنیم:

strConnection = ConfigurationManager.
ConnectionStrings["dbConnectionString"].ConnectionString;
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );

اکنون نیاز داریم تا تصویر مورد نظر را با استفاده از یک کوئری بدست آوریم. برای این کار از دستورات زیر استفاده میکنیم:

strSQL = "SELECT ImageData " +
"FROM BookImage " +
"WHERE BookImageID=" + imageID;
dc = new OleDbCommand(strSQL, dbConn);
imageData = (byte[])(dc.ExecuteScalar( ));

سپس تصویر دریافتی را در یک شیء MemoryStream قرار میدهیم

ms = new MemoryStream(imageData);
fullsizeImage = System.Drawing.Image.FromStream(ms);

اکنون طول و عرض تصویر را محاسبه میکنیم:

// calculate the amount to shink the height and width
thumbnailWidth =
Convert.ToInt32(Math.Round((Convert.ToDouble(THUMBNAIL_HEIGHT) /
fullsizeImage.Height) * fullsizeImage.Width));
// create the thumbnail image
thumbnailImage = fullsizeImage.GetThumbnailImage(thumbnailWidth,IntPtr.Zero);

در نهایت با نوشتن thumbnail بدست آمده در شیء Response ، کار را خاتمه میدهیم

حال بیایید تا صفحه ای طراحی کنیم که در آن تعداد بیشتری تصویر را از پایگاه داده دریافت کرده و thumbnail آنها را نمایش دهیم. همانگونه که قبلا گفتیم برای این کار از کنترل Datalist استفاده میکنیم. کد این کنترل به این شرح خواهد بود

<asp:DataList ID="dlImages" Runat="server"
RepeatColumns="4" RepeatDirection="Horizontal"
RepeatLayout="Table" Width="50%"
OnItemDataBound="dlImages_ItemDataBound">
<HeaderTemplate>
<tr>
<td colspan="4" class="subHeading" align="center">
Thumbnails of Images In Database<br /><br />
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<img id="imgThumbnail" runat="server" border="0" src="" alt="image"/>
</ItemTemplate>
</asp:DataList>

همانگونه که میبینید، از یک تگ img برای نمایش تصویر استفاده کرده ایم اما از آنجایی که نمیخواهیم همان تصویر دریافتی از پایگاه داده ها را نمایش دهیم و نیاز داریم تا قبل از نمایش تصویر، ان را پردازش کنیم، فعلا چیزی را به این تگ مقید نمیکنیم.

نکته اینجاست که همانگونه که در کد میبنیید، از یک رخداد به نام OnItemDataBound استفاده کرده ایم. این رخداد به ازای هر باری که یکی از عناصر موجود در کنترل Datalist بخواهد به منبع داده مقید شود، رخ میدهد. بنابراین این رخداد به ازای هر تصویر تکرار میشود . ما میتوانیم در آن لحظه تصویر مورد نظر را گرفته و آن را پردازش کنیم و پس از بدست آوردن thumbnail آن ، thumbnail مذکور را به تگ img موجود در Datalist انتساب دهیم.

بنابراین کد این رخداد چنین چیزی خواهد بود :

protected void dlImages_ItemDataBound(Object sender,
System.Web.UI.WebControls.DataListItemEventArgs e)
{
System.Web.UI.HtmlControls.HtmlImage img = null;
// make sure this is an item in the data list (not header etc.)
if ((e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType == ListItemType.AlternatingItem))
{
// get a reference to the image used for the bar in the row
img = (System.Web.UI.HtmlControls.HtmlImage)
(e.Item.FindControl("imgThumbnail"));
// set the source to the page that generates the thumbnail image
img.Src = "CH15ThumbnailFromDatabaseCS.aspx?ImageID=" +
(((DbDataRecord)(e.Item.DataItem))["BookImageID"]).ToString( );
}
}

در این کد ابتدا چک کرده ایم که آیا عنصری که رخداد برای آن رخ داده درون بخش ItemTemplate یا AlternateItemTemplate است یا خیر. و در صورتی که عنصر مذکور در یکی از این دو بخش باشد ادامه کار را انجام میدهیم. دلیل انجام این کار این است که رخداد مورد بحث برای کلیه عناصر حتی آنهایی که درون HeaderTemplate و FooterTemplate و ... هستند نیز رخ میدهد و از آنجایی که تگ img مورد استفاده ما تنها در ItemTemplate قرار دارد، به پردازش عناصر بخشهای دیگر نیازی نداریم.

پس از آن نیاز داریم تا به تگ img درون datalist دسترسی داشته باشیم. که این کار را از طریق متد FindControl انجام میدهیم. سپس نتیجه را به یک شیء از نوع HtmlImage که معادل تگ img است تبدیل میکنیم و آن را درون متغیری که قبلا از همین نوع و به اسم img تعریف کرده ایم می ریزیم.

سپس رکورد مورد نظر را با استفاده از e.Item.DataItem دریافت میکنیم. آنگاه میتوانیم با استفاده از کد زیر

شناسه تصویر مورد نظر را بدست آوریم.

اکنون که توانستیم این کار را انجام دهیم، کافی است تا همانطور که قبلا گفتیم، این شناسه را به صفحه قبلی که مسولیت ایجاد thumbnail توصیر مورد نظر ما را داشت ارسال کنیم و تصویر thumbnail مورد نظر را دریافت کنیم.

پس کافی است کد مورد نظر را به این شکل طراحی کنیم:

img.Src = "CH15ThumbnailFromDatabaseCS.aspx?ImageID=" +
(((DbDataRecord)(e.Item.DataItem))["BookImageID"]).ToString( );

using System;
using System.Configuration;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
…
protected void Page_Load(object sender, EventArgs e)
{
// height of the thumbnail created from the original image
const int THUMBNAIL_HEIGHT = 75;
OleDbConnection dbConn = null;
OleDbCommand dc = null;
byte[] imageData = null;
String strConnection = null;
String strSQL = null;
MemoryStream ms = null;
System.Drawing.Image fullsizeImage = null;
System.Drawing.Image thumbnailImage = null;
int thumbnailWidth;
String imageID = null;
if (!Page.IsPostBack)
{
try
{
// get the ID of the image to retrieve from the database
imageID = Request.QueryString[QS_IMAGE_ID];
// get the connection string from web.config and open a connection
// to the database
strConnection = ConfigurationManager.
ConnectionStrings["dbConnectionString"].ConnectionString;
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT ImageData " +
"FROM BookImage " +
"WHERE BookImageID=" + imageID;
dc = new OleDbCommand(strSQL, dbConn);
imageData = (byte[])(dc.ExecuteScalar( ));
// create an image from the byte array
ms = new MemoryStream(imageData);
fullsizeImage = System.Drawing.Image.FromStream(ms);
// calculate the amount to shink the height and width
thumbnailWidth =
Convert.ToInt32(Math.Round((Convert.ToDouble(THUMBNAIL_HEIGHT) /
fullsizeImage.Height) * fullsizeImage.Width));
// create the thumbnail image
thumbnailImage = fullsizeImage.GetThumbnailImage(thumbnailWidth,
THUMBNAIL_HEIGHT,
null,
IntPtr.Zero);
// write thumbnail to the response object
ms = new MemoryStream( );
thumbnailImage.Save(ms, ImageFormat.Jpeg);
Response.ContentType = "image/jpg";
Response.BinaryWrite(ms.ToArray( ));
}
finally
{
if (dbConn != null)
{
dbConn.Close( );
}
}
}
} // Page_Load

<div align="center" class="pageHeading">
Display Thumbnail Images (VB)
</div>
<div align="center">
<asp:DataList ID="dlImages" Runat="server"
RepeatColumns="4" RepeatDirection="Horizontal"
RepeatLayout="Table" Width="50%"
OnItemDataBound="dlImages_ItemDataBound">
<HeaderTemplate>
<tr>
<td colspan="4" class="subHeading" align="center">
Thumbnails of Images In Database<br /><br />
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<img id="imgThumbnail" runat="server" border="0" src="" alt="image"/>
</ItemTemplate>
</asp:DataList><
</div>

using System;
using System.Configuration;
using System.Data;
using System.Data.Common;
using System.Data.OleDb;
using System.Web.UI.WebControls;
namespace ASPNetCookbook.CSExamples
{
/// <summary>
/// This class provides the code-behind for
/// CH15TestThumbnailsFromDatabaseCS.aspx
/// </summary>
public partial class CH15TestThumbnailsFromDatabaseCS : System.Web.UI.Page
{
///***********************************************************************
/// <summary>
/// This routine provides the event handler for the page load event.
/// It is responsible for initializing the controls on the page.
/// </summary>
///
/// <param name="sender">Set to the sender of the event</param>
/// <param name="e">Set to the event arguments</param>
protected void Page_Load(object sender, EventArgs e)
{
OleDbConnection dbConn = null;
OleDbCommand dc = null;
OleDbDataReader dr = null;
String strConnection = null;
String strSQL = null;
if (!Page.IsPostBack)
{
try
{
// get the connection string from web.config and open a connection
// to the database
strConnection = ConfigurationManager.
ConnectionStrings["dbConnectionString"].ConnectionString;
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT BookImageID " +
"FROM BookImage";
dc = new OleDbCommand(strSQL, dbConn);
dr = dc.ExecuteReader( );
// set the source of the data for the repeater control and bind it
dlImages.DataSource = dr;
dlImages.DataBind( );
}
finally
{
// clean up
if (dbConn != null)
{
dbConn.Close( );
}
}
}
} // Page_Load
///***********************************************************************
/// <summary>
/// This routine is the event handler that is called for each item in the
/// datalist after a data bind occurs. It is responsible for setting the
/// source of the image tag to the URL of the page that will generate the
/// thumbnail images with the ID of the appropriate image for the item.
/// </summary>
///
/// <param name="sender">Set to the sender of the event</param>
/// <param name="e">Set to the event arguments</param>
protected void dlImages_ItemDataBound(Object sender,
System.Web.UI.WebControls.DataListItemEventArgs e)
{
System.Web.UI.HtmlControls.HtmlImage img = null;
// make sure this is an item in the data list (not header etc.)
if ((e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType == ListItemType.AlternatingItem))
{
// get a reference to the image used for the bar in the row
img = (System.Web.UI.HtmlControls.HtmlImage)
(e.Item.FindControl("imgThumbnail"));
// set the source to the page that generates the thumbnail image
img.Src = "CH15ThumbnailFromDatabaseCS.aspx?ImageID=" +
(((DbDataRecord)(e.Item.DataItem))["BookImageID"]).ToString( );
}
} // dlImages_ItemDataBound
} // CH15TestThumbnailsFromDatabaseCS
}