bildirgec.org

image crop 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>

Görüntü Seçme Bileşeni: imgAreaSelect

angelsdemos | 25 October 2010 09:32

imgAreaSelect, interaktif ortamdaki herhangi bir görüntüyü dikdörtgen biçiminde belirli bir bölümünü seçmenize yarayan bir jQuery uygulamasıdır. Bu uygulama ile seçtiğiniz bölgenin özelliklerini size görebilir, zoom yapabilirsiniz. Ayrıca birçok şekilde geliştirilerek kırpma, düzenleme gibi farklı uygulamalar yapılabilir.

CSS ile hazırlanmış ve özelleştirilebilen imgAreaSelect, API fonksiyonlarını destekler.Farklı php ve asp uygulamarı ile kolay entegrasyonu sağlayabilirsiniz. Tıkladığınız alanın en ve boyu haricinde x1, x2, y1, y2 eksenlerini de öğrenebilir ayrıca seçtiğiniz bölgenin normal koşullarda veya büyültülmüş olarak nasıl göründüğünü görebilirsiniz.

8 Popüler Javascript Görüntü Kırpma

filezza | 21 May 2009 20:42

Javascript Image Cropping Scripts
Javascript Image Cropping Scripts

Web sitelerinde kullanılan görselleri, kullanılacak alana göre boyutlandırmak ve kırpmak program bilgisi olanlar için kolay bir uygulamadır. Ancak, bazen gereğinden fazla zaman harcamayı gerektirir veya program kullanmak için ne zaman, ne de bilgi vardır.

Bu durumda ya çevrimiçi bir araç aramak gerekir (program öğrenmek daha iyi olur) veya aşağıda göreceğiniz, hotscript tarafından listelenen en fazla tercih edilen 8 javascript gibi sorunumuzu çözecek kolay scriptlere ulaşmamız gerekir.

Görselleri boyutlandırma ve kırpma işlerini kolaylaştıracak 8 javascript;

UvumiTools Crop
UvumiTools Crop, görüntü boyutlandırma ve kırpma işlemi için geliştirilen bir mootool eklentisi.

Javascript Image Cropping Scripts
Javascript Image Cropping Scripts

Javascript Image Cropper UI
Prototype JavaScript framework ve script.aculo.us

Javascript Image Cropping Scripts
Javascript Image Cropping Scripts

Image crop – DHTML
Görüntü kırpmak/boyutlandırmak için DHTML kullanıcı arayüzü sunar. İstenen bölgenin üzerine bir dikdörtgen sürüklenir ve kesilir.PHP sunucu üzerinde imagemagick kullanır.

Javascript Image Cropping Scripts
Javascript Image Cropping Scripts