我需要在Jquery中使用Jcrop裁剪图像 [英] I Hav An Image I Need To Crop The Image Using Jcrop In Jquery
问题描述
下面给出crop.aspx页面
<< pre lang =xml>％@ Page Language = QUOT; C＃" AutoEventWireup = QUOT;真"的CodeFile = QUOT; crop.aspx.cs"继承= QUOT;农作物" ％>
<！DOCTYPE html>
< ; html xmlns =" http：//www.w3.org/1999/xhtml">
< head>
< title> jQuery Crop Image using crop plugin< / title>
< script type =" text / javascript" src =" http：//code.jquery.com/jquery-1.8.2.js">< / script>
< script src =" jquery.Jcrop.js" type =" text / javascript">< / script>
< link href =" jquery.Jcrop.css"的rel ="样式表"类型= QUOT;文本/ CSS" />
< script type =" text / javascript">
$（function（）{
$（'＃ imgcrop'）。Jcrop（{
onSelect：getcroparea
}）;
}）
function getcroparea（ c）{
$（'＃hdnx'）。val（cx）;
$（'＃hdny'）。val（cy）;
$（'＃hdnw'）。val（cw）;
$（'＃hdnh'）。val（ch）;
};
< / script>
< / head>
< body>
< form id ="窗口2" runat =" server">
< div>
< img src =" Images / banner-bg.jpg" ID = QUOT; imgcrop" alt =" sample image" />
< input type =" hidden" ID = QUOT; hdnx" RUNAT = QUOT;服务器" />
< input type =" hidden" ID = QUOT; hdny" runat =" server" />
< input type =" hidden" ID = QUOT; hdnw" runat =" server" />
< input type =" hidden" ID = QUOT; hdnh" RUNAT = QUOT;服务器" />
< asp：Button ID =" btncrop" RUNAT = QUOT;服务器"的OnClick = QUOT; btncrop_Click" Text =" Crop Images" />
< img id =" imgcropped" RUNAT = QUOT;服务器"可见= QUOT假QUOT; />
< / div>
< / form>
< / body>
< / html>
function getcroparea（c）{
$（'＃hdnx'）。val（cx）;
$（'＃hdny'）。val（cy）;
$（'＃hdnw'）。val（cw）;
$（ '#hdnh'）。val（ch）;
};
< / script>
< / head>
< body>
< form id =" form2" runat =" server">
< div>
< img src =" Images / banner-bg.jpg" ID = QUOT; imgcrop" alt =" sample image" />
< input type =" hidden" ID = QUOT; hdnx" RUNAT = QUOT;服务器" />
< input type =" hidden" ID = QUOT; hdny" runat =" server" />
< input type =" hidden" ID = QUOT; hdnw" runat =" server" />
< input type =" hidden" ID = QUOT; hdnh" RUNAT = QUOT;服务器" />
< asp：Button ID =" btncrop" RUNAT = QUOT;服务器"的OnClick = QUOT; btncrop_Click" Text =" Crop Images" />
< img id =" imgcropped" RUNAT = QUOT;服务器"可见= QUOT假QUOT; />
< / div>
< / form>
< / body>
< / html>
crop.aspx.cs页面如下：
使用系统;
使用System.Drawing;
使用System.IO;
使用Image = System.Drawing.Image;
公共部分类裁剪：System.Web.UI。页面
{
protected void Page_Load（object sender，EventArgs e）
{
}
protected void btncrop_Click（object sender，EventArgs e）
{
尝试
{
string fname =pool.jpg;
string fpath = Path.Combine（Server.MapPath （〜/ Images），fname）;
图像oimg = Image.FromFile（fpath）;
矩形cropcords = new Rectangle（
Convert.ToInt32（ hdnx.Value），
Convert.ToInt32（hdny.Value），
Convert.ToInt32（hdnw.Value），
Convert.ToInt32 （hdnh.Value））;
字符串cfname，cfpath;
位图bitMap = new Bitmap（cropcords.Width，cropcords.Height，oimg.PixelFormat）;
图形grph = Graphics.FromImage（bitMap）;
grph.DrawImage（oimg，new Rectangle（0,0，bitMap.Width，bitMap.Height），cropcords，GraphicsUnit.Pixel ）;
cfname =crop_+ fname;
cfpath = Path.Combine（Server.MapPath（〜/ cropimages），cfname）;
bitMap.Save（cfpath）;
imgcropped.Visible = true;
imgcropped.Src =〜/ cropimages /+ cfname;
}
catch（Exception ex）
{
throw ex;
}
}
}
The crop.aspx page given below
<<pre lang="xml">%@ Page Language="C#" AutoEventWireup="true" CodeFile="crop.aspx.cs" Inherits="crop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Crop Image using crop plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#imgcrop').Jcrop({
onSelect: getcroparea
});
})
function getcroparea(c) {
$('#hdnx').val(c.x);
$('#hdny').val(c.y);
$('#hdnw').val(c.w);
$('#hdnh').val(c.h);
};
</script>
</head>
<body>
<form id="form2" runat="server">
<div>
<img src="Images/banner-bg.jpg" id="imgcrop" alt="sample image"/>
<input type="hidden" id="hdnx" runat="server" />
<input type="hidden" id="hdny" runat="server"/>
<input type="hidden" id="hdnw" runat="server"/>
<input type="hidden" id="hdnh" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
<img id="imgcropped" runat="server" visible="false" />
</div>
</form>
</body>
</html>
function getcroparea(c) {
$('#hdnx').val(c.x);
$('#hdny').val(c.y);
$('#hdnw').val(c.w);
$('#hdnh').val(c.h);
};
</script>
</head>
<body>
<form id="form2" runat="server">
<div>
<img src="Images/banner-bg.jpg" id="imgcrop" alt="sample image"/>
<input type="hidden" id="hdnx" runat="server" />
<input type="hidden" id="hdny" runat="server"/>
<input type="hidden" id="hdnw" runat="server"/>
<input type="hidden" id="hdnh" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
<img id="imgcropped" runat="server" visible="false" />
</div>
</form>
</body>
</html>
crop.aspx.cs page given below
using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;
public partial class crop : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btncrop_Click(object sender, EventArgs e)
{
try
{
string fname = "pool.jpg";
string fpath = Path.Combine(Server.MapPath("~/Images"), fname);
Image oimg = Image.FromFile(fpath);
Rectangle cropcords = new Rectangle(
Convert.ToInt32(hdnx.Value),
Convert.ToInt32(hdny.Value),
Convert.ToInt32(hdnw.Value),
Convert.ToInt32(hdnh.Value));
string cfname, cfpath;
Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);
Graphics grph = Graphics.FromImage(bitMap);
grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
cfname = "crop_" + fname;
cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname);
bitMap.Save(cfpath);
imgcropped.Visible = true;
imgcropped.Src = "~/cropimages/" + cfname;
}
catch (Exception ex)
{
throw ex;
}
}
}
推荐答案
（function（）{
(function () {
（'＃imgcrop'）。Jcrop（{
onSelect：getcroparea
}）;
}）
函数getcroparea（c）{
('#imgcrop').Jcrop({
onSelect: getcroparea
});
})
function getcroparea(c) {
（ '#hdnx'）。val（cx）;
('#hdnx').val(c.x);
这篇关于我需要在Jquery中使用Jcrop裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
