Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Silverlight 4 : Crop Image

Developer diberi kemudahan untuk membuat aplikasi ‘manipulasi gambar’ sederhana sejak Silverlight 3, dengan diberikannya class WriteableBitmap. Dengan adanya class ini maka pengguna dapat melakukan ‘manipulasi gambar’ pada client, tanpa campur tangan atau melakukan operasi pada server seperti yang pernah terjadi pada Silverlight 2.

1

Pada gambar di atas, dapat dilihat gambar besar yang ditampilkan dengan menggunakan control Image yang ada di sebelah kiri (Image_Source). Sedangkan hasil cropping akan ditampilkan pada control Image yang ada di sebelah kanan (Image_Destination). Sebelum melakukan operasi crop, user akan menentukan titik pusat area cropping dengan mengklik pada gambar besar. Setelah itu user dapat mengklik tombol Crop maka hasil cropping akan dapat dilihat pada Image_Destination.

Berikut ini adalah isi dari file MainPage.xaml.

   1: <UserControl x:Class="CropImage.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d"
   7:     d:DesignHeight="650" d:DesignWidth="800" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="Black">
  10:         <Image Height="400" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Image_Source" MouseLeftButtonDown="Image_Source_MouseLeftButtonDown" Stretch="Fill" VerticalAlignment="Top" Width="550" Source="/CropImage;component/images/Femur-01.png" />
  11:         <Image Height="175" HorizontalAlignment="Left" Margin="600,79,0,0" Name="Image_Destination" Stretch="Fill" VerticalAlignment="Top" Width="175" />
  12:         <Button Content="Crop" Height="23" HorizontalAlignment="Left" Margin="12,497,0,0" Name="Button_Crop" VerticalAlignment="Top" Width="75" Click="Button_Crop_Click" />
  13:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,425,0,0" Name="label1" VerticalAlignment="Top" Width="430" Foreground="White" Content="Klik satu titik pada gambar untuk menentukan titik pusat area cropping" />
  14:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,446,0,0" Name="label3" VerticalAlignment="Top" Width="56" Foreground="White" Content="X Offset :" />
  15:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="74,446,0,0" Name="Label_MouseX" VerticalAlignment="Top" Width="52" Foreground="White" />
  16:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,468,0,0" Name="label5" VerticalAlignment="Top" Width="52" Foreground="White" Content="Y Offset :" />
  17:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="74,468,0,0" Name="Label_MouseY" VerticalAlignment="Top" Width="52" Foreground="White" />
  18:         <sdk:Label Height="21" HorizontalAlignment="Left" Margin="646,44,0,0" Name="label6" VerticalAlignment="Top" Width="85" Content="Hasil Cropping" Foreground="White" />
  19:         <Rectangle Height="175" HorizontalAlignment="Left" Margin="600,79,0,0" Name="rectangle1" Stroke="White" StrokeThickness="3" VerticalAlignment="Top" Width="175" />
  20:         <Rectangle Height="400" HorizontalAlignment="Left" Margin="12,12,0,0" Name="rectangle2" Stroke="White" StrokeThickness="3" VerticalAlignment="Top" Width="551" />
  21:     </Grid>
  22: </UserControl>

Pada barisan kode di atas, dapat dilihat 2 event, yaitu :

  • MouseLeftButtonDown (baris 10), yang akan menjalankan method Image_Source_MouseLeftButtonDown ketika mouse diklik pada area gambar di sebelah kanan (Image_Destination),
  • Button_Crop_Click (baris 12), yang akan menjalankan method Button_Crop_Click ketika tombol diklik.

Berikut adalah isi dari method Image_Source_MouseLeftButtonDown.

private void Image_Source_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point mouseXY = e.GetPosition(null);
 
    mouseX = e.GetPosition(null).X.ToString();
    mouseY = e.GetPosition(null).Y.ToString();
 
    Label_MouseX.Content = mouseX;
    Label_MouseY.Content = mouseY;
}

Dan berikut ini adalah isi dari method Button_Crop_Click.

   1: private void Button_Crop_Click(object sender, RoutedEventArgs e)
   2: {
   3:     // menangkap data gambar sumber (gambar besar)
   4:     // dan memasukkannya ke dalam objek wb
   5:     WriteableBitmap wb = new WriteableBitmap(Image_Source, null);
   6:  
   7:     // menentukan titik awal cropping
   8:     int xOffset = Convert.ToInt32(mouseX) - 88;
   9:     int yOffset = Convert.ToInt32(mouseY) - 88;
  10:  
  11:     // memeriksa batas cropping
  12:     if (xOffset < 0)
  13:     {
  14:         xOffset = 0;
  15:     }
  16:     else if (xOffset + 175 > Image_Source.Width)
  17:     {
  18:         xOffset = Convert.ToInt32(Image_Source.Width) - 175;
  19:     }
  20:  
  21:  
  22:     if (yOffset < 0)
  23:     {
  24:         yOffset = 0;
  25:     }
  26:     else if (yOffset + 175 > Image_Source.Height)
  27:     {
  28:         yOffset = Convert.ToInt32(Image_Source.Height) - 175;
  29:     }
  30:  
  31:     // cropping dilakukan
  32:     Image_Destination.Source = CropImage(wb, xOffset, yOffset, 175, 175);
  33: }

Pada baris ke 32, dapat dilihat pemanggilan method CropImage yang berfungsi untuk menampilkan hasil cropping pada elemen Image_Destination. Berikut adalah isi dari method CropImage.

private WriteableBitmap CropImage(WriteableBitmap source, int xOffset, int yOffset, int w, int h)
{
    int sourceWidth = source.PixelWidth;
 
    WriteableBitmap result = new WriteableBitmap(w, h);
    for (int y = 0; y <= h - 1; y++)
    {
        int sourceIndex = xOffset + (yOffset + y) * sourceWidth;
        int destinationIndex = y * w;
 
        Array.Copy(source.Pixels, sourceIndex, result.Pixels, destinationIndex, w);
    }
 
    return result;
}

Dari semua tertulis di atas, jangan lupa untuk meng-‘using’ namespace System.Windows.Media.Imaging agar kita bisa menggunakan class WriteableBitmap.

Akhir kata, silakan untuk melanjutkan menikmati liburan akhir pekan yang panjang.

Share this post: | | | |
Posted: May 28 2010, 02:15 PM by reyza | with 2 comment(s)
Filed under: , ,

Comments

Twitter Trackbacks for Silverlight 4 : Crop Image - Reyza [netindonesia.net] on Topsy.com said:

Pingback from  Twitter Trackbacks for                 Silverlight 4 : Crop Image - Reyza         [netindonesia.net]        on Topsy.com

# May 28, 2010 6:26 PM

farhadalaydrus said:

Dicoba dulu bos.. Thanx banget sharenya ya..

# June 13, 2010 11:52 PM