Print

Crop Image Control

06.05.2007 18:34:00
Kategori : ASP.NET

Özet :
Resim upload edilen sayfalar hazırladığım zaman, son kullanıcılar tarafında yaşadığım sıkıntılar oluyor, bir çok kişinin de bu tip sorunlar yaşadığına tanık oldum. Nedir bu sorunlar; son kullanıcının bizim istediğimiz boyutlarda resim upload edememesi, upload edilen resimde odaklanmak istenilen alanın dışında da bir çok obje olması, resim üzerindeki kalabalık, kirlilik. Bu makalede bu sorunu bir nebze nasıl çözmeye çalıştığımı anlatmaya çalışacağım.

Ekran Görüntüleri

cemsisman_sh1.PNG

cemsisman_sh2.PNG

Bilinen Kısıtlamalar

Makalenin bu versiyonunda sadece jpeg formatındaki resimler üzerinde uygulayabilirsiniz.
Kontrolümüzü bilgisayarımıza indirdikten sonra aşağıda "Web Config Ayarlarında" gösterildiği gibi düzenlememiz gerekiyor.
Download : http://blog.cemsisman.net/wp-content/uploads/2007/05/cropimage.zip

Web.Config Ayarları

Gerekli httpHandler’i uygulamamıza ekliyoruz.
<httpHandlers>              

            <add verb="*" path="uploadedImage.ashx"

type="Yazgelistir.Web.UI.WebControls.ShowImageHandler">

</httpHandlers>

Script Ayarları

“__JS” klasörünü uygulamanızın root klasörüne kopyalayın.

Kontrol Özellikleri

MinWidth : Kesilecek alanın uzunluğunun en az ne kadar olacağını belirler.
MinHeight : Kesilecek alanın yüksekliğinin en az ne kadar olacağını belirler.
MaxWidth : Kesilecek alanın uzunluğunun en fazla ne kadar olacağını belirler.
MaxHeight : Kesilecek alanın yüksekliğinin en fazla ne kadar olacağını belirler.
ImagePath : Resim kesilip kaydedildiğinde hangi klasöre kaydedileceğini belirler.
FileName : Resim kesilip kaydedildiğinde hangi isimde kaydedileceğini belirler.
Text : Default “Resmi Yükle”
UploadImage : Resim kesildikten sonra System.Drawing.Bitmap sınıfında bir değer döndürülür.
UploadImageStream : Kesilen resmi stream hali.

Crop() : Resmi kesme emrini veren method.

Kontrol Eventleri

Upload : “Resmi Yükle” buttonuna tıklandığı zaman tetiklenen event.

 

Örnek Uygulama

Zip dosyasının açıp içerisinde bulunan DLL’imizi uygulamamızın bin klasörüne kopyalayın.
ToolBox’ımıza sağ tıklayıp “Choose Items” diyerek bin klasörümüze kopyaladığımız DLL’imizi ekliyoruz. Kontrolümüzü kullanacağımız web sayfamıza ToolBox’tan sürükleyip bırakıyoruz.
Zip dosyasının içerisinde bulunan “__JS” klasörünü uygulamanızın olduğu klasöre kopyalayın.

Uygulamamıza CropImageDemo.aspx isminde yeni bir web sayfası ekleyelim .

cemsisman_sh3.PNG

CropImageDemo1.aspx

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

 

<%@ Register Assembly="Yazgelistir.Web.UI.WebControls.CropImage" Namespace="Yazgelistir.Web.UI.WebControls"

    TagPrefix="yg" %>

 

<!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>Crop Image Demo 1</title>

 

<script src="__JS/prototype.js" type="text/javascript"></script>

      <script src="__JS/scriptaculous.js" type="text/javascript"></script>

      <script src="__JS/cropper.js" type="text/javascript"></script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div>   

<yg:cropimage id="CropImage1" runat="server"   OnUpload="CropImage1_Upload" ImagePath="~/images" Width="371px" ></yg:cropimage>

            <br />

            <br />

        <asp:Button ID="btnCrop" runat="server" Text="Crop" />

    </div>

    </form>

</body>

</html>

CropImageDemo1.aspx.cs

protected void CropImage1_Upload(object sender, EventArgs e) {

       

}

 

protected void btnCrop_Click(object sender, EventArgs e) {

     CropImage1.Crop();

}

Referanslar

Resim kesme işlemlerinde kullanılan scriptler için David Spur’a teşekkür ederim.
Scriptler ve uygulama hakkında daha detaylı bilgi için http://www.defusion.org.uk/

 

Makale hakkında sorularınız, önerileriniz ve düşünceleriniz için http://www.cemsisman.com/,  Download Source code: Codeplex Web Crop Image

Cem ŞİŞMAN – ASP.Net MVP
http://cemsisman.com/cem
http://www.cemsisman.com/
İletişim : cem_sisman@hotmail.com

 

Yazgelistir.com