使用jcrop进行图像裁剪 [英] image cropping with jcrop

问题描述

朋友们，我对IT更新，并且刚加入Code Project。我目前正在进行一个项目，我需要在jcrop的帮助下手动进行图像裁剪，而手动裁剪它应该在同一弹出窗口中显示裁剪的部分..请问，如果有任何身体可以帮助我..我需要asp.net代码对于那个..

解决方案

你好Jahangir，



它在这里不起作用。



以下是询问者的预期：

1. 首先尝试你想做什么！你可能会发现它并不那么难。

2.制定你所做的事情看似问题/不工作。



尝试一下，告诉你是否面临问题。

各位会员非常乐意帮忙。





现在，以下内容应该让您开始学习如何/怎么做：

使用jQuery和jCrop在ASP.Net中进行图像裁剪 [ ^ ]

使用jQuery，JCrop和ASP.NET上传和裁剪图像 [ ^ ]

thnx很多...这里是我的代码，它的工作正常，但我不能根据我的需要修改它。我想在流行音乐上显示它，然后当我裁剪图像时，它应该在javascript中显示一些图像控制。谢谢，如果有任何人可以帮助我。

 <％@     Page    语言  =  C＃    AutoEventWireup   =  true    CodeFile   =  UploadAndCrop.aspx.cs   继承  =  UploadAndCrop   ％>  
 
 <  ！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  >  
 <   script       type   =  text / javascript    src   =  http://ajax.googleapis.com/ajax/libs/j query / 1.3 / jquery.min.js >  <   /   script  >  
 <   script     src   =  js / jquery.Jcrop.min.js   类型  =  text / javascript >  <   /   script  >  
 <   script     s rc   =  preview / jquery.min.js   类型  =  text / javascript >  <   /   script  >  
 <   script     src   =  preview / jquery.Jcrop.js   类型  =  text / javascript < span class =code-keyword>>  <   /   script  >  
 <  < span class =code-leadattribute> link     rel   = 样式表    href   =  preview / jquery.Jcrop.css   类型  =  text / css     /  >  
 
 <   script    类型  =  text / javascript >  
 jQuery（ document ）。ready（ function （）{
 jQuery（' ＃imgCrop' ）。Jcrop（{
 onSelect：storeCoords 
}）; 
}）; 
  function  storeCoords（c）{
 jQuery（' ＃X'）VAL（CX）。 
 jQuery（'  #Y'）。val（c.y）; 
 jQuery（' ＃W'）。val（c.w）; 
 jQuery（' ＃H'）。val（c.h）; 
}; 
 <   /   script  >  
 
 <   / head  >  
 <  正文 >  
 <  表格    id   =  form1    runat   = 服务器 >  
 <   div  >  
 <   asp：Panel     ID   =  pnlUpload    runat   =  server >  
 <   asp ：FileUpload     ID   = 上传    runat   =  server    /  >  
 <   br     /  > ;  
 <   asp：按钮    ID   =  btnUpload    runat   =  server    OnClick   =  btnUpload_Click 
   文字  = 上传    /  >  
 <   asp：标签    ID   =  lblError    runat   =  server   可见  =  false    /   >  
 <   / asp：Panel  >  
 <   asp：Panel     ID   =  pnlCrop    runat   =   server   可见 < span class =code-keyword> =  false >  
 <   asp：Image     ID   =  imgCrop    runat   = 服务器    /  >  
 <   br     /  >  
 < ;   asp：HiddenField     ID   =  X    runat   =  server    /  >  
 <   asp：HiddenField     ID   =  Y    runat   =  server    /  >  
 <   asp：HiddenField     ID   =  W    runat   =  server    /  >  
 <   asp：HiddenField     ID   =  H    runat   = 服务器    /  >  
 <   asp：按钮    ID   =  btnCrop < span class =code-attribute>   runat   =  server   文本  =  裁剪    OnClick   =  btnCrop_Click    /  >  
 <   / asp：Panel  >  
 <   asp：Panel     ID  < span class =code-keyword> =  pnlCropped    runat   =  server   可见  =  false >  
 <   asp ：图像    ID   =  imgCropped   运行at   =  server    /  >  
 <   / asp：Panel  >  
  <   / div  >  
 <   / form  >  
 <   / body  >  
 <   / html  >  

Hi friends i am fresher in IT and have just join Code Project. I am currently working on a project where i need image cropping manually with the help of jcrop and while manually cropping it should display the cropped part on the same pop up.. please if any body can help me .. i need asp.net code for that..

解决方案

Hi Jahangir,

It does not work like this here.

Here is what is expected of enquirers:
1. TRY first what you want to do! You may find that it''s not that hard.
2. Formulate what was done by you that looks like an issue/not working.

Try them and tell if you face issues.
Members will be more than happy to help like this.


For now, following should get you started and learn on what/how to do:
Image Cropping in ASP.Net Using jQuery and jCrop[^]
Upload and Crop Images with jQuery, JCrop and ASP.NET[^]

thnx alot... here is my code below its working fine but i am not able to modify it as of my need. i want to show it on a pop then as i crop image it should display there also with some image control in javascript. thanks if any body can help me.

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

<!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>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="preview/jquery.min.js" type="text/javascript"></script>
<script src="preview/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="preview/jquery.Jcrop.css" type="text/css" />

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#imgCrop').Jcrop({
            onSelect: storeCoords
        });
    });
    function storeCoords(c) {
        jQuery('#X').val(c.x);
        jQuery('#Y').val(c.y);
        jQuery('#W').val(c.w);
        jQuery('#H').val(c.h);
    };
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click
" Text="Upload" />
<asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
<asp:Image ID="imgCrop" runat="server" />
<br />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
<asp:Image ID="imgCropped" runat="server" />
</asp:Panel>
</div>
    </form>
</body>
</html>

这篇关于使用jcrop进行图像裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！