bildirgec.org

jcrop hakkında tüm yazılar

Image Crop With JCrop Asp.Net

admin | 12 November 2010 15:33

Default.aspx Dosyamızın kod kısmına.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!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>

    <link href="Css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

    <script src="http://arsiv.pilli.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="http://arsiv.pilli.com/Scripts/jquery.Jcrop.js" type="text/javascript"></script>

    <script language="Javascript" type="text/javascript">



        // Remember to invoke within jQuery(window).load(...)

        // If you don't, Jcrop may not initialize properly

        jQuery(document).ready(function () {



            jQuery('#ImageCrop').Jcrop({

                onChange: showCoords,

                onSelect: showCoords

            });



        });



        // Our simple event handler, called from onChange and onSelect

        // event handlers, as per the Jcrop invocation above

        function showCoords(c) {

            jQuery('#X').val(c.x);

            jQuery('#Y').val(c.y);

            jQuery('#X2').val(c.x2);

            jQuery('#Y2').val(c.y2);

            jQuery('#W').val(c.w);

            jQuery('#H').val(c.h);

        };



		</script>



</head>

<body>

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

   

     

     <asp:Label ID="Status" runat="server"></asp:Label>

        <asp:Panel ID="PanelUpload" runat="server">

        <span>Dosya Adı</span> <asp:TextBox ID="TextFileName" runat="server"></asp:TextBox>

            <asp:FileUpload ID="FU" runat="server" />

            <asp:Button ID="UploadBtn" runat="server" onclick="UploadBtn_Click" Text="Upload" />

        </asp:Panel>

          <asp:Panel ID="PanelResize" runat="server">

          <asp:panel ID="PanelCrop" runat="server">

              <asp:Image ID="ImageCrop" runat="server"/>

          </asp:panel>

        <asp:Panel ID="PanelCoords" runat="server">

            <asp:TextBox ID="X" runat="server"></asp:TextBox>

            <asp:TextBox ID="X2" runat="server"></asp:TextBox>

               <asp:TextBox ID="Y" runat="server"></asp:TextBox>

                  <asp:TextBox ID="Y2" runat="server"></asp:TextBox>

                     <asp:TextBox ID="W" runat="server"></asp:TextBox>

                        <asp:TextBox ID="H" runat="server"></asp:TextBox>



        </asp:Panel>

        <asp:panel ID="PanelControls" runat="server">

        <asp:Button ID="CropButton" runat="server" onclick="CropButton_Click" Text="Crop" />

        <asp:Button ID="CancelButton" runat="server" Text="Cancel" 

                onclick="CancelButton_Click" />

        </asp:panel>

        </asp:Panel>

          <asp:Panel ID="PanelSave" runat="server">

              <asp:Image ID="ImageCropped" runat="server" />

                      <asp:TextBox ID="TextSaved" runat="server"></asp:TextBox>

                      </asp:Panel>

    </form>

</body>

Resim Kırpma Bileşeni: Jcrop

angelsdemos | 23 June 2010 09:36

Jcrop, herhangi bir imajı üzerinde kesme, kırpma, kopyalama gibi imaj üzerinden yapılabilecek bazı işlemleri gerçekleştirmek için arayüz oluşturabilen interaktif bir uygulamadır. Jcrop herhangi bir imaj dosyasının belirli bir bölümünü seçmeye yarayan muhteşem bir jQuery uygulamasıdır.

Jcrop ile her türlü imajın belirli bir bölümünü seçerek bu imaj üzerinden çeşitli işlemler yapabilirsiniz. Seçtiğiniz bölgenin koordinatlarını (x1, x2, y1, y2, w,h) öğrenebilir, farklı bir bölgede sadece kestiğiniz kısmı normal veya yakınlaşmış olarak görebilir veya sadece seçili kısmı değişikliğe uğramaz halde gösterebilirsiniz.

Tüm bu seçme işlemleri sonrasında resme farklı tooltip şeklinde notlar ekleyebilir (Facebook‘taki gibi), imajın seçili bölgesini daha yakından göstererek ürününüzün kalitesini gösterebilir veya imaj üzerinden kesme, kırma, efektler uygulama gibi farklı işlemleri farklı yöntemlerle gerçekleştirebilirsiniz. Ayrıca Jcrop üzerinde farklı renkler kullanarak web sitenize göre kişiselleştirebilirsiniz.