ASP.NETはJcropでアバターのオンライン編集保存を実現

16281 ワード
jcrop swfupload アバターカット
swfuploadを利用して顔をアップロードし、Jcropを利用して顔のオンライン選択を実現し、ashxを提出して元の顔を切り取る.コードは次のとおりです.
default.aspx: 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Jcrop._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>
    <title>Jcrop  </title>
    <script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="JS/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="JS/swfupload/handlers.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.color.js"></script>
    <script type="text/javascript" src="JS/mytest.js"></script>
    <link href="JS/Jcrop/css/jquery.Jcrop.min.css" rel="Stylesheet" type="text/css" />
    <link href="CSS/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
         var swfu;
         window.onload = function () {
             swfu = new SWFUpload({
                 upload_url: "imgUpload.ashx",
                 post_params: {
                     "ASP.NET_SESSIONID": "<%=Session.SessionID %>",
                     "ASPSESSID": "<%=Session.SessionID %>"
                 },

                 file_size_limit: "1024",
                 file_types: "*.jpg",
                 file_types_description: "JPG Images",
                 file_upload_limit: "-1",

                 file_queue_error_handler: fileQueueError,
                 file_dialog_complete_handler: fileDialogComplete,
                 upload_progress_handler: uploadProgress,
                 upload_error_handler: uploadError,
                 upload_success_handler: uploadSuccess,
                 upload_complete_handler: uploadComplete,

                 button_image_url: "/Image/swfupload/XPButtonNoText_160x22.png",
                 button_width: "160",
                 button_height: "22",
                 button_placeholder_id: "spanButtonPlaceHolder1",
                 button_text: '<span class="theFont">    </span>',
                 button_text_style: ".theFont { font-size: 13;}",
                 button_text_left_padding: 12,
                 button_text_top_padding: 3,
                 button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE, //SWFUplaod.BUTTON_ACTION.SELECT_FILES       
                 flash_url: "/JS/swfupload/swfupload.swf",

                 custom_settings: {
                     upload_target: "divFileProgressContainer1"
                 },
                 debug: false
             });
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td height="25" width="30%" align="right">
                     ：
            </td>
            <td height="25" width="*" align="left">
                <div id="swfu_container1" style="margin: 0px 10px;">
                    <div>
                        <span id="spanButtonPlaceHolder1"></span>
                    </div>
                    <div id="divFileProgressContainer1" style="height: 75px;">
                    </div>
                    <div id="thumbnails1">
                        <div id="div_addPhoto">
                            <img alt="    " id="img_UserPhoto1" name="img_UserPhoto1" />
                        </div>
                        <input type="hidden" runat="server" id="userphoto1" />
                    </div>
                    <div id="div_photoadd" style="width: 100px; height: 100px; overflow: hidden; display: none">
                        <img alt="    " id="viewUserPhoto" />
                    </div>
                    <input type="button" id="btn_imgcut" style="display: none" onclick="checkCoords($('#x').val(), $('#y').val(), $('#w').val(), $('#h').val(), $('#userphoto1').val())"
                        value="    " />
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

mytest.js 
//*************     Code By:5653325 http://blog.csdn.net/5653325*********************
var xy_x, xy_y;

function JcropInit() {
    $('#img_UserPhoto1').Jcrop({
        bgOpacity: 0.5,
        onChange: updateCoords,
        onSelect: updateCoords,
        keySupport: false,
        aspectRatio: 1,
        bgColor: 'white',
        addClass: 'jcrop-normal'
    }, function () {
        var xy = this.getBounds();
        xy_x = xy[0];
        xy_y = xy[1];
        api = this;
        api.setSelect([1, 1, 100, 100]);
        api.setOptions({ bgFade: true, bgColor: $.Jcrop.defaults.bgColor, bgOpacity: $.Jcrop.defaults.bgOpacity });
    });
};
function updateCoords(c) {
    if (parseInt(c.w) > 0) {
        var rx = 100 / c.w;
        var ry = 100 / c.h;
        $('#viewUserPhoto').css({
            width: Math.round(rx * xy_x) + 'px',
            height: Math.round(ry * xy_y) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    }
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
//    

function checkCoords(x, y, w, h, f) {
    if (x < 0 || y < 0 || w < 10 || h < 10) {
        alert('      ，    。');
        return false;
    }
    else {
        $.ajax({
            type: "POST",
            data: "cmd=cut&t=" + Math.random() + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&f=" + f,
            url: "imgCut.ashx",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            success: function (text) {
                var dataobj = eval(text);
                if (dataobj[0].count == 0) {
                    alert(dataobj[0].list[0].error);
                }
                else {
                    $('#div_addPhoto').empty();
                    $('#div_addPhoto').append("<img alt='    ' id='img_UserPhoto1' name='img_UserPhoto1' />");
                    $("#img_UserPhoto1").attr("src", dataobj[0].list[0].path + "?t=" + Math.random());
                    $("#viewUserPhoto").attr("src", dataobj[0].list[0].path + "?t=" + Math.random());
                    $("#div_photoadd").css("display", 'none');
                    $("#btn_imgcut").css("display", 'none');
                }
            },
            error: function (request, message, ex) {
                alert("  ：" + message);
            }
        });
    }
};

swfuploadの下のhandler.jsの関数の変更
function uploadSuccess(file, serverData) {
    try
    {
        //*************     Code By:5653325 http://blog.csdn.net/5653325*********************
        $('#div_addPhoto').empty();
        $('#div_addPhoto').append("<img alt='    ' id='img_UserPhoto1' name='img_UserPhoto1'  />");
        $("#img_UserPhoto1").attr("src", serverData + "?t=" + Math.random());
        $("#userphoto1").val(serverData);
        $("#viewUserPhoto").attr("src", serverData + "?t=" + Math.random());
        $("#div_photoadd").css("display", '');
        $("#btn_imgcut").css("display", '');
        JcropInit();
	} catch (ex) {
		this.debug(ex);
	}
}

画像アップロードashx(imageupload.ashx)
<%@ WebHandler Language="C#" Class="imgUpload" %>

using System;
using System.Web;
using System.IO;
public class imgUpload : IHttpHandler
{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string updir = context.Server.MapPath(@"~\Upload\userphoto") + "\\";
        if (context.Request.Files.Count > 0)
        {
            try
            {
                for (int j = 0; j < context.Request.Files.Count; j++)
                {
                    HttpPostedFile uploadFile = context.Request.Files[j];
                    if (uploadFile.ContentLength > 0)
                    {
                        if (!Directory.Exists(updir))
                        {
                            Directory.CreateDirectory(updir);
                        }
                        string extname = Path.GetExtension(uploadFile.FileName);
                        string fullname =Guid.NewGuid().ToString();
                        string filename = uploadFile.FileName;

                        uploadFile.SaveAs(string.Format("{0}{1}", updir, fullname + extname));                        
                        context.Response.Write(string.Format(@"/Upload/userphoto/{0}", fullname + extname));
                    }
                }
            }
            catch (Exception ex)
            {
                context.Response.Write("Message" + ex.ToString());
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

画像カットashx(imgcut.ashx)
<%@ WebHandler Language="C#" Class="imgCut" %>

using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.IO;
public class imgCut : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";       
        int x = 1, y = 1, w = 1, h = 1;
        string f = string.Empty;
        if (context.Request["x"] == null || context.Request["y"] == null || context.Request["w"] == null || context.Request["h"] == null)
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"     。\"}]}]");
            context.Response.End();
        }
        if (context.Request["f"] == null)
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"      。\"}]}]");
            context.Response.End();
        }
        else
        {
            f = context.Request["f"].ToString().Replace("/", "\\");
        }
        try
        {
            x = int.Parse(context.Request["x"].ToString());
            y = int.Parse(context.Request["y"].ToString());
            w = int.Parse(context.Request["w"].ToString());
            h = int.Parse(context.Request["h"].ToString());
        }
        catch
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"       。\"}]}]");
            context.Response.End();
        }
        if (!File.Exists(context.Server.MapPath("~\\" + f)))
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"       。\"}]}]");
            context.Response.End();
        }

        Bitmap b;
        Graphics g;
        using (Image img = System.Drawing.Image.FromFile(context.Server.MapPath("~\\" + f)))
        {
            b = new Bitmap(w, h, img.PixelFormat);
            b.SetResolution(img.HorizontalResolution, img.VerticalResolution);
            g = Graphics.FromImage(b);
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.PixelOffsetMode = PixelOffsetMode.Half; 
            g.DrawImage(img, new Rectangle(0, 0, w, h),new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
            img.Dispose();
        }
        string ff = context.Server.MapPath("~\\" + f);
        b.Save(ff);
        b.Dispose();
        g.Dispose();
        context.Response.Write("[{count:1,list:[{\"path\":\"" + f.Replace("\\", "/") + "\"}]}]");
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

Jcropのパラメータ、APIの説明ドキュメントを添付します.
パラメータ:
名前
デフォルト
説明
allowSelect
true
新規選択を許可
allowMove
true
選択範囲の移動を許可
allowResize
true
選択範囲のズームを許可
trackDocument
true
 
baseClass
"jcrop"
ベーススタイル名の接頭辞.説明:class=「jcrop-holder」で、変更されたのはその中のjcropだけです.
addClass
null
スタイル会を追加します.例:値が「test」であると仮定すると、class=「test jcrop-holder」にスタイルが追加されます.
bgColor
"black"
背景色.色キー、HEX、RGBどちらでも構いません.
bgOpacity
0.6
背景の透明度
bgFade
false
バックグラウンド遷移効果の使用
borderOpacity
0.4
選択した枠線の透明度
handleOpacity
0.5
ズームボタンの透明度
handleSize
9
ズームボタンのサイズ
handleOffset
5
ズームボタンと枠線の距離
aspectRatio
0
ボックス幅の高さ比を選択します.説明:width/height
keySupport
true
キーボードコントロールをサポートします.キーリスト:上下左右(移動)、Esc(キャンセル)、Tab(裁断枠から飛び出して次へ)
cornerHandles
true
コーナーズームを許可
sideHandles
true
四辺ズームを許可
drawBorders
true
枠線の描画
dragEdges
true
外枠のドラッグを許可
fixedSupport
true
 
touchSupport
null
 
boxWidth
0
キャンバスの幅
boxHeight
0
キャンバスの高さ
boundary
2
境界.説明:境界からマウスをドラッグしてトリミング領域を選択できます.
fadeTime
400
過剰効果の時間
animationDelay
20
アニメーションの遅延
swingSpeed
3
かとそくど
minSelect
[0,0]
ボックスの最小選択サイズ.説明:選択ボックスがサイズより小さい場合は、自動的に選択解除されます.
maxSize
[0,0]
選択ボックスの最大サイズ
minSize
[0,0]
ボックスの最小サイズ
onChange
function(){}
ボックス変更時のイベント
onSelect
function(){}
セレクトボックスタイミングのイベント
onRelease
function(){}
選択解除時のイベント
API
名前
説明
setImage(string)
画像を設定(または変更)します.例:jcrop_api.setImage(「newpic.jpg」)
setOptions(object)
初期化設定パラメータと同じフォーマットのパラメータを設定(または変更)
setSelect(array)
[x,y,x 2,y 2]のパラメータ形式で選択ボックスを作成します.
animateTo(array)
アニメーション効果で選択ボックスを作成します.パラメータのフォーマットは[x,y,x 2,y 2]です.
release()
選択解除
disable()
Jcropを無効にします.説明:既存の選択ボックスはクリアされません.
enable()
Jcropの有効化
destroy()
Jcropの削除
tellSelect()
選択ボックスの値(実際のサイズ)を取得します.例:console.log(jcrop_api.tellSelect()
tellScaled()
選択ボックスの値(インタフェースサイズ)を取得します.例:console.log(jcrop_api.tellScale()
getBounds()
画像の実際のサイズを取得します.フォーマットは[w,h]です.
getWidgetSize()
画像表示サイズを取得し、[w,h]のフォーマット
getScaleFactor()
画像のスケールを取得します.フォーマットは[w,h]です.
ソースのダウンロード:http://download.csdn.net/detail/5653325/6488655
Symfony2のプロジェクトにひたすら機能テストを書いた話
【PHPUnit】privateプロパティの値をテスト用に書き換えてテストする