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
Gerekli httpHandler’i uygulamamıza ekliyoruz. <httpHandlers>
<add verb="*" path="uploadedImage.ashx"
type="Yazgelistir.Web.UI.WebControls.ShowImageHandler">
</httpHandlers>
“__JS” klasörünü uygulamanızın root klasörüne kopyalayın.
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.
Upload : “Resmi Yükle” buttonuna tıklandığı zaman tetiklenen event.
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 .
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 />
<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();
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/post/Web-Based-Crop-Image-Control-v10.aspx
Cem ŞİŞMAN – ASP.Net MVP http://cemsisman.com/cem http://www.cemsisman.com/İletişim : cem_sisman@hotmail.com