New ASP.NET 3.5 Control : Generated Image
Kadang pada aplikasi yang dibangun terdapat fasilitas untuk melakukan upload foto atau gambar dan tentu saja ada kemampuan untuk menampil foto atau gambar tersebut. Foto atau gambar tersebut dapat ditampilkan berupa tumbnail.
Disalah satu aplikasi yang kami bangun, gambar yang menjadi tumbnail dibuat dengan 'hanya me-resize' ukuran gambar/foto yang telah di-upload dengan menggunakan atribut Width dan Height pada tagl <img> atau pada control <asp:Image>. Artinya setiap file yang ditampilkan masih mempunyai ukuran file yang sama. Bayangkan bila 1 file gambar yang diupload sebesar 1MB kemudian 'tumbnail bohongan' yang ditampilkan ada 13 buah, maka satu halaman akan berukuran 13MB.....'keren bukan' ? :)
Jadi harus dicari solusi untuk menghilangkan hal 'keren' ini, dari hasil jalan-jalan dengan mengedarai 'mesin pencarian terpercaya' maka bertemulah dengan project ASP.NET di CodePlex, url-nya dapat dikunjungi di sini. Pada halaman tersebut dapat ditemui satu project yang baru saja keluar tidak lebih 1 bulan (sejak tulisan ini di-publish), yaitu tanggal 19 Agustus 2008.
Apa saja yang dijanjikan oleh ASP.NET Generated Image Futures? Berikut hal-hal penting yang bisa didapat :
- Control ini menjanjikan dapat menampilkan gambar yang ada di dalam tabel dalam suatu database dengan lebih cepat.
- Membuat gambar secara on-the-fly.
- Memodifikasi gambar yang sudah ada, seperti mengubah ukuran secara on-the-fly, memberikan tulisan dan lain-lain.
- Cache untuk mempercepat load gambar.
- etc.
{Yang Perlu Disiapkan}
Terlebih dahulu yang perlu disiapkan adalah mengunduh Microsoft.Web.GeneratedImage.dll di sini. File-file contoh program juga bisa ditemui pada url tersebut, termasuk database yang berisi gambar untuk latihan.
File Microsoft.Web.GeneratedImage.dll dapat digunakan untuk menambah control baru pada toolbox VS2008, seperti yang terlihat pada gambar berikut :
{Hello World with ASP.NET Generated Image Futures}
Apa yang harus dilakukan?
Pertama tentu saja membuat project Web Application atau cukup dengan membuat Website. Setelah itu tambahkan file Microsoft.Web.GeneratedImage.dll sebagai reference website atau web application.
Langkah kedua adalah membuat Image Http Handler, dengan isi seperti ini :
<%@ WebHandler Language="C#" Class="HelloWorldImageHandler" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;
public class HelloWorldImageHandler : ImageHandler
{
public HelloWorldImageHandler()
{
}
public override ImageInfo GenerateImage(NameValueCollection parameters)
{
}
}
Pada construktor, hal yang bisa diisikan adalah konfigurasi cache dan juga format image yang diinginkan. Sedangkan pada method GenerateImage, seperti namanya adalah method yang akan berfungsi 'apa saja yang dilakukan' untuk men-generate gambar yang akan ditampilkan. Di dalam method ini dapat ditambahkan baris-baris untuk mengambil data gambar dari database. Atau dituliskan baris-baris yang berfungsi untuk mengambil gambar dari filesystem kemudian melakukan proses modifikasi gambar seperti memberikan tambahan text pada gambar dan secara on-the-fly gambar dengan text yang diinginkan ditampilkan pada halaman web.
Jangan lupa tambahkan baris berikut pada Image Handler :
using System.Drawing;
using System.Web;
using Microsoft.Web;
Berikut contoh yang paling sederhana dari file Image Handler.
<%@ WebHandler Language="C#" Class="HelloWorldImageHandler" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;
public class HelloWorldImageHandler : ImageHandler
{
public HelloWorldImageHandler()
{
this.ContentType = System.Drawing.Imaging.ImageFormat.Gif;
}
public override ImageInfo GenerateImage(NameValueCollection parameters)
{
Bitmap bitmap = new Bitmap(232, 213);
Graphics graphic = Graphics.FromImage(bitmap);
graphic.Clear(Color.Red);
graphic.DrawString(parameters["myText"],
new Font(FontFamily.GenericSansSerif, 16),
Brushes.Black, 0, 0);
return new ImageInfo(bitmap);
}
}
Bila diperhatikan pada construktor terdapat baris yang mendefinisikan format file gambar yang akan digunakan, pada kasus ini format file gambar adalah GIF. Artinya nanti ketika gambar sudah muncul pada web browser dapat dicoba untuk mengklik kanan gambar tersebut dan perhatikan extension dari gambar tersebut, dipastikan adalah GIF. Selain format GIF dapat pula digunakan format :
- BMP.
- EMF.
- Exif.
- Icon.
- Jpeg.
- PNG.
Setelah itu, tinggal buat file ASPX yang akan menampilkan gambar tersebut.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.Web.GeneratedImage"
Namespace="Microsoft.Web" TagPrefix="asp" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GeneratedImage ID="GeneratedImage1"
runat="server"
ImageHandlerUrl="~/HelloWorldImageHandler.ashx">
<Parameters>
<asp:imageparameter name="myText" value="Hello World" />
</Parameters>
</asp:GeneratedImage>
</div>
</form>
</body>
</html>
Tidak perlu penjelasan lagi bukan maksud dari baris-baris pada halaman ASPX di atas? Mungkin yang mesti diperhatikan adalah :
- Mesti didaftarkan control GeneratedImage (dapan dilihat pada bagian atas).
- Pada control GeneratedImage, atribut ImageHandlerUrl adalah file dari Image Hander yang telah dibuat.
- Nama parameter myText yang ada pada control GeneratedImage mesti didaftarkan terlebih dahulu pada file Image Handler. Disini parameter ini berfungsi untuk menampung text yang akan ditampilkan pada gambar.
Berikut hasil dari contoh kode di atas.
{Membuat Image Handler Otomatis}
Bila pada toolbox sudah ditambahkan control GeneratedImage, maka control itu dapat dimanfaatkan untuk membuat Image Handler secara otomatis, caranya cukup dengan melakukan drag-n-drop control GeneratedImage pada halaman ASPX, kemudian pada mode design dapat dilihat control GeneratedImage seperti pada gambar berikut.
Klik "Create Image Handler" maka secara otomatis file Image Handler akan dibuatkan dengan isi seperti berikut ini :
<%@ WebHandler Language="C#" Class="ImageHandler1" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;
public class ImageHandler1 : ImageHandler {
public ImageHandler1() {
// Set caching settings and add image transformations here
// EnableServerCache = true;
}
public override ImageInfo GenerateImage(NameValueCollection parameters) {
// Add image generation logic here and return an instance of ImageInfo
throw new NotImplementedException();
}
}
{Menampilkan Dan Memodifikasi Gambar}
Paga bagian ini akan diberikan contoh untuk menampilkan gambar yang sudah ada kemudian dicoba untuk memodifikasi seperti memberikan tulisan atau mengubah ukuran lebar & tinggi gambar.
Berikut ini contoh Image Handler untuk mengubah ukuran lebar dan tinggi gambar.
<%@ WebHandler Language="C#" Class="ImageHandler1" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;
public class ImageHandler1 : ImageHandler
{
public ImageHandler1()
{
this.ContentType = System.Drawing.Imaging.ImageFormat.Png;
}
public override ImageInfo GenerateImage(NameValueCollection parameters)
{
string imageUrl = Convert.ToString(parameters["imageUrl"]);
Bitmap original = new Bitmap(imageUrl);
Bitmap bitmap = new Bitmap(original, 100, 100);
return new ImageInfo(bitmap);
}
}
Dan berikut ini contoh control GeneratedImage yang digunakan.
<asp:GeneratedImage ID="GeneratedImage1" runat="server"
ImageHandlerUrl="~/ImageHandler1.ashx">
<Parameters>
<asp:ImageParameter Name="imageUrl" Value="C:\fn1.JPG" />
</Parameters>
</asp:GeneratedImage>
Hasilnya :
Gambar disebelah kiri adalah gambar original, sedangkan gambar sebelah kiri output dari Image Handler. Sedangkan dari ukuran dapat dilihat pada gambar berikut.
Terbukti ukuran menjadi lebih kecil.
Sekarang akan dicoba untuk memberikan sebuah text pada gambar tersebut. Berikut contoh Image Handler yang digunakan.
<%@ WebHandler Language="C#" Class="ImageHandler2" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;
public class ImageHandler2 : ImageHandler
{
public ImageHandler2()
{
this.ContentType = System.Drawing.Imaging.ImageFormat.Png;
}
public override ImageInfo GenerateImage(NameValueCollection parameters)
{
string imageUrl = Convert.ToString(parameters["imageUrl"]);
Bitmap bitmap = new Bitmap(imageUrl);
Graphics gra = Graphics.FromImage(bitmap);
gra.DrawString("www.TerangWangi.net",
new Font("Verdana", 32, FontStyle.Bold),
new SolidBrush(Color.Red), 30, bitmap.Height / 2);
return new ImageInfo(bitmap);
}
}
Dan berikut contoh kode control GeneratedImage yang digunakan :
<asp:GeneratedImage ID="GeneratedImage1" runat="server"
ImageHandlerUrl="~/ImageHandler2.ashx">
<Parameters>
<asp:ImageParameter Name="imageUrl" Value="C:\DSC_0708.JPG" />
</Parameters>
</asp:GeneratedImage>
Hasilnya dapat dilihat pada gambar berikut ini.
{jangan komentarin fotonya yg nge-blur ya, ini cuma quick shoot saat bertemu pertama kali dengan lensa 50mm f1.4}
{Mengambil dan Menampilkan Image dari Database}
Contoh pada bagian ini mengambil dari contoh yang terdapat pada CodePlex. Contoh berikut ini menggunakan LINQ to SQL. Maka dapat dilihat tabel dan class LINQ to SQL seperti pada gambar berikut.
Dan berikut ini contoh kode Image Handler untuk mengambil data dari database sekaligus men-'GenerateImage'-nya agar bisa ditampilkan pada halaman ASPX.
<%@ WebHandler Language="C#" Class="ProductImageHandler" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using System.Linq;
using Microsoft.Web;
public class ProductImageHandler : ImageHandler
{
public ProductImageHandler()
{
this.ImageTransforms.Add(new ImageResizeTransform
{
Width = 300,
Mode = ImageResizeMode.Fit
});
this.EnableClientCache = true;
this.EnableServerCache = true;
}
public override ImageInfo GenerateImage(NameValueCollection parameters)
{
using (DataClassesDataContext db = new DataClassesDataContext())
{
return new ImageInfo(db.MyImages.Single(x =>
x.ImageID == int.Parse(parameters["imageid"])).ImageData.ToArray());
}
}
}
Dan berikut ini contoh penggunaan control DataList dan GeneratedImage untuk menampilkan gambar.
<asp:DataList ID="DataList1" runat="server" DataSourceID="LinqDataSource1">
<ItemTemplate>
<cc1:GeneratedImage ID="GeneratedImage1" runat="server"
ImageHandlerUrl="~/ProductImageHandler.ashx"
Timestamp='<%# Eval("TimeLastModified") %>'>
<Parameters>
<cc1:ImageParameter Name="imageid" Value='<%# Eval("ImageID") %>'/>
</Parameters>
</cc1:GeneratedImage>
<br />
</ItemTemplate>
</asp:DataList>
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext"
Select="new (ImageID, TimeLastModified)"
TableName="MyImages">
</asp:LinqDataSource>
{Yang Baru Kutahu : Upload dan Menyimpan Data Ke Dalam Database Dengan Mudah}
Hal ini baru kutahu ketika melihat contoh kode "DatabaseImages", salah satu contoh penggunaan control GeneratedImage yang bisa ditemui pada CodePlex. Pada contoh ini terdapat contoh untuk mengupload file (dalam kasus ini adalah file gambar) dan kemudian menyimpan data gambar tersebut kedalam database. Caranya sangat simple bila ditulis dengan LINQ to SQL.
Berikut adalah isi kode file ASPX :
<asp:FileUpload ID="ImageUploader" runat="server" />
<br />
<asp:Button ID="SaveImage" runat="server"
Text="Save Image" onclick="SaveImage_Click" />
Dan berikut ini code file dari file ASPX ini :
protected void SaveImage_Click(object sender, EventArgs e)
{
using (DataClassesDataContext db = new DataClassesDataContext())
{
db.MyImages.InsertOnSubmit(
new MyImage
{
ImageData = this.ImageUploader.FileBytes
});
db.SubmitChanges();
}
}
Sangat pendek dan sederhana untuk ditulis, tetapi tetap belum tertarik untuk menyimpan gambar di dalam database.
{Selamat mencoba & selamat menunaikan ibadah puasa, mohon maaf lahir batin dan semoga puasa bulan ini lebih baik dari bulan-bulan sebelumnya}