asp.net使用Jquery.Jcrop进行图片自由diy剪切上传教程详解
前言与基础准备
首先来说这种功能是很常见的，而且也是现代上传图片的一种潮流，自由定制上传就是我们所说的Diy
我们先来准备一下素材吧
1.新建一个asp.net网站如下 ，名称随便起，
2.准备一张504*374的图片
3.下载一个Jquery，和jquery.Jcrop.min.js，jquery.Jcrop.min.css 这些我一会儿打包上传上来大家可以自己下载 的源码进行测试
第一步新建asp.net网站
如下图片
这里面有三个地方需要我们注意
第一个是upload上传图片保存的目录
第二个default.aspx页面
第三个avatarservice.ashx一般处理程序
有了这样。我们先来看看default.aspx页面吧
页面就只有这些，我是拉的控件少的不能再少了，就是想给大家一个原生的，不加任何别的东西。
方便大家使用
一起来看看default.aspx的Html代码
[HTML] 纯文本查看 复制代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.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>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<link href="Scripts/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<style> .none{ display: none;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script>
//上传图片按钮单击事件
function picclick() {
if (document.all)
document.getElementById("btnupload").click();
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("btnupload").dispatchEvent(evt);
}
}
</script>
<%-- 上传控件--%>
<input type="file" name="photo" runat="server" id="photoFile" />
<asp:Button ID="btnupload" runat="server" CssClass="none" Text="Button" />
<p>裁剪前头像(504*374)</p>
<div class="big" style="width: 504px; height: 374px; overflow: hidden;">
<img id="photo" runat="server" src="image/0130830091530.jpg" />
</div>
<p> 裁剪后头像(120*150)</p>
<div style="width: 120px; height: 150px; border: 1px solid #dedede; overflow: hidden;">
<img id="preview" runat="server" src="image/0130830091530.jpg" /></div>
<%-- x--%>
<input type="hidden" runat="server" id="px" />
<%-- y--%>
<input type="hidden" runat="server" id="py" />
<%-- width--%>
<input type="hidden" runat="server" id="pw" />
<%-- heigh--%>
<input type="hidden" runat="server" id="ph" />
<%-- path--%>
<input type="hidden" runat="server" id="ppath" />
<input type="button" class="btn" id="btnEnter" value="保存剪切">
<span style="color: Red;" runat="server" id="tipMsg"></span>
<script type="text/javascript">
//保存剪切后的图片
function save() {
$.ajax({
type: "POST",
url: "AvatarService.ashx",
data: { myaction: "save", pw: $("#pw").val(),
ph: $("#ph").val(), px: $("#px").val(),
py: $("#py").val(), ppath: $("#ppath").val()
}
, beforeSend: function () {
$("#tipMsg").html("");
}, success: function (msg) {
$("#tipMsg").html(msg);
if (msg.indexOf("成功") != -1) {
setTimeout('window.location.href = "Default.aspx";', 2000);
}
}, error: function (error) {
$("#tipMsg").html(error);
}
});
}
// 大图片
$('#photo').Jcrop({
onChange: showPreview, //选择大图片时执行的事件
onSelect: setsize, //选择完成后执行的事件
onRelease: hidePreview,
aspectRatio: 120 / 150//选择图片的比率
});
// //小图片
var $preview = $('#preview');
function showPreview(coords) {
if (parseInt(coords.w) > 0) {
var rx = 120 / coords.w;
var ry = 150 / coords.h;
previewshow(rx, ry, coords.x, coords.y)
}
}
//显示剪切效果
function previewshow(rx, ry, x, y) {
$preview.css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * x) + 'px',
marginTop: '-' + Math.round(ry * y) + 'px'
}).show();
}
//设置参数
function hidePreview() {
$preview.stop().fadeOut('fast');
}
//选择后设置各个参数
function setsize(coords, e) {
$("#pw").val(coords.w);
$("#ph").val(coords.h);
$("#px").val(coords.x);
$("#py").val(coords.y);
coords.x = 0;
}
</script>
</div>
</form>
</body>
</html>
源码里面有注释，我相信不用我多说大家就能看明白
然后再来CS下的代码
[C#] 纯文本查看 复制代码 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace Web
{
public partial class Default : System.Web.UI.Page
{
string img = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
preview.Src = img;
}
protected void btnupload_Click(object sender, EventArgs e)
{
string msg = "";
string ww = "0";
HttpPostedFile file = photoFile.PostedFile;
if (!file.ContentType.Contains("image"))
{
msg = "照片格式不合法";
return;
}
string ext = Path.GetExtension(file.FileName).ToLower();
if (ext != ".jpg" && ext != ".gif" && ext != ".png" && ext != ".jpeg")
{
msg = "请您上传jpg、gif、png图片";
}
if (file.ContentLength > 5 * 1024 * 1024)
{
msg = "请您上传512字节内的图片";
}
string newName = Guid.NewGuid().ToString();
string tempPath = "image/upload/";
img = tempPath + newName + ext;
string filePath = Server.MapPath(img);
tempPath = Server.MapPath(tempPath);
if (!Directory.Exists(tempPath))
{
Directory.CreateDirectory(tempPath);
}
using (System.Drawing.Image originalImage = System.Drawing.Image.FromStream(file.InputStream))
{
float sw = 0;
System.Drawing.Image.GetThumbnailImageAbort callback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
originalImage.GetThumbnailImage(497, 367, callback, IntPtr.Zero).Save(filePath);
ww = sw.ToString();
msg = img;
}
tipMsg.InnerText = "上传成功";
photo.Src = msg;
preview.Src = msg;
ppath.Value = msg;
}
public bool ThumbnailCallback()
{
return false;
}
}
}
很简单吧
再来看看AvatarService 的代码
[C#] 纯文本查看 复制代码 <%@ WebHandler Language="C#" Class="AvatarService" %>
using System;
using System.Web;
using System.IO;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
public class AvatarService : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["myaction"];
if (action == "save")
{
float pw = float.Parse(context.Request["pw"]);
float ph = float.Parse(context.Request["ph"]);
float px = float.Parse(context.Request["px"]);
float py = float.Parse(context.Request["py"]);
string ppath = context.Request["ppath"];
ppath = context.Server.MapPath(ppath);
string imgpath = string.Empty;
Bitmap b = new Bitmap(ppath);
string extend = Path.GetExtension(ppath).ToLower();
//剪裁图片
RectangleF rec = new RectangleF(px, py, pw, ph);
Bitmap nb = b.Clone(rec, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
//从重保存图片
ppath = ppath.Replace(extend, "") + "_sml" + extend;
nb.Save(ppath);
context.Response.Write("保存成功！");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
好了我们一起来看看效果吧
运行
我们现在选择一张图片进行上传
为了和默认图片区分开，我们来选择一张别的图片
然后单击打开
看效果图片传来了
而且会自动剪切
我们现在可能自由选择了
只要将鼠标放到大图上就可以有效果出现，如下图
在保存之前我们一起来看看图片目录下吧
我们能清楚的看到只有我们刚才选择的大图片
下面我们单击一下保存按钮
是不是多出来一张，我们刚选择的图片的一部分哦，
放大看看
对就是我刚选择的部分，截图并上传成功了。
下面我提供下源码大家要吧亲自进行测试
Web.zip
(587.37 KB, 下载次数: 697)
| 
窥视卡
雷达卡
发表于 2013-8-30 10:46:12
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2013-8-30 10:54:16
