asp.net使用Jquery.Jcrop进行图片自由diy剪切上传详解（附源码）

站长苏飞 · 发表于 2013-8-30 10:46:12

asp.net使用Jquery.Jcrop进行图片自由diy剪切上传教程详解

前言与基础准备

首先来说这种功能是很常见的，而且也是现代上传图片的一种潮流，自由定制上传就是我们所说的Diy
我们先来准备一下素材吧
1.新建一个asp.net网站如下，名称随便起，
2.准备一张504*374的图片
3.下载一个Jquery，和jquery.Jcrop.min.js，jquery.Jcrop.min.css 这些我一会儿打包上传上来大家可以自己下载的源码进行测试

第一步新建asp.net网站
如下图片
QQ截图20130830100046.jpg

这里面有三个地方需要我们注意
第一个是upload上传图片保存的目录
第二个default.aspx页面
第三个avatarservice.ashx一般处理程序
有了这样。我们先来看看default.aspx页面吧
QQ截图20130830100336.jpg

页面就只有这些，我是拉的控件少的不能再少了，就是想给大家一个原生的，不加任何别的东西。
方便大家使用
一起来看看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;
        }
    }

}

好了我们一起来看看效果吧
运行
QQ截图20130830100805.jpg