富頭像編輯器是一款支持本地上傳、預覽、視頻拍照和網絡加載的flash頭像編輯上傳插件，能夠對圖片進行縮放、裁剪、旋轉、定位和調色調節亮度等簡單處理；富頭像編輯器擁有很的參數配置，可根據自己的需要配置控件的功能；該控件要求瀏覽器需安裝Flash Player後才能使用；下面是我做的一個小的Demo以說明富頭像編輯器的使用方法。
- 小巧的身材：文件大小僅僅只有 48 KB，而新浪的頭像編輯器組件有 58.1 KB，更有甚者達 80 KB 之多以上。漂亮的外觀：灰色系的外觀設計，適用於所有風格的站點。還可輕鬆地實現換膚。強大的功能：原圖支持本地上傳、視頻拍照和網絡加載，圖片編輯有縮放、裁剪、旋轉、定位和調色等功能。豐富的接口：可自定義頭像（大小、數目...）、所有文本（包括其字體，大小，顏色，方便擴展多語言站點）、可在外部接口中定義選項卡、按鈕...跨平臺兼容：運行環境Flash Player 10.1+，任何瀏覽器 IE All、Firefox、 Chrome、Opera...都正常使用。極致的體驗：人性化的設計方式，細節上精心的處理，用戶使用起來得心應手。
1.前臺頁面
需引用js文件和初始化富頭像編輯器，腳本代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple demo</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/swfobject/swfobject.js"></script>
<script type="text/javascript" src="/swfobject/fullAvatarEditor.js"></script>
</head>
<body>
<div style="width: 800px; margin: 0 auto;">
<h1 style="text-align: center">富頭像上傳編輯器演示</h1>
<div>
<p id="swfContainer">
本組件需要安裝Flash Player後纔可使用，請從
<a href="http://www.adobe.com/go/getflashplayer">這裏</a>
下載安裝。
</p>
</div>
@* <button type="button" id="upload">自定義上傳按鈕</button>*@
</div>
<script type="text/javascript">
//控件參數參考：http://www.fullavatareditor.com/api.html#usage
swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor("swfContainer", {
id: 'swf',
upload_url: '/Home/UploadAction',
// src_url: "/samplePictures/Default.jpg",//默認加載的原圖片的url
src_upload: 2,//默認爲0；是否上傳原圖片的選項，有以下值：0:不上傳；1:上傳；2 :顯示覆選框由用戶選擇
isShowUploadResultIcon: false,//在上傳完成時（無論成功和失敗），是否顯示錶示上傳結果的圖標
src_size: "2MB",//選擇的本地圖片文件所允許的最大值，必須帶單位，如888Byte，88KB，8MB
src_size_over_limit: "文件大小超出2MB，請重新選擇圖片。",//當選擇的原圖片文件的大小超出指定最大值時的提示文本。可使用佔位符{0}表示選擇的原圖片文件的大小。
src_box_width: "300",//原圖編輯框的寬度
src_box_height: "300",//原圖編輯框的高度
tab_visible: false,//是否顯示選項卡*
browse_box_width: "300",//圖片選擇框的寬度
browse_box_height: "300",//圖片選擇框的高度
avatar_sizes: "200*200",//100*100|50*50|32*32,表示一組或多組頭像的尺寸。其間用"|"號分隔。
}, function (msg) {
switch (msg.code) {
// case 1: alert("頁面成功加載了組件！"); break;
// case 2: alert("已成功加載默認指定的圖片到編輯面板。"); break;
case 3:
if (msg.type == 0) {
alert("攝像頭已準備就緒且用戶已允許使用。");
}
else if (msg.type == 1) {
alert("攝像頭已準備就緒但用戶未允許使用！");
}
else {
alert("攝像頭被佔用！");
}
break;
case 5:
if (msg.type == 0) {
if (msg.content.sourceUrl) {
alert("原圖片已成功保存至服務器，url爲：\n" + msg.content.sourceUrl);
}
alert("頭像已成功保存至服務器，url爲：\n" + msg.content.avatarUrls.join("\n"));
}
break;
}
}
);
document.getElementById("upload").onclick = function () {
swf.call("upload");
};
});
</script>
</body>
</html> 2.後臺代碼
後臺是對提交過來的文件進行保存處理並返回相應的結果，代碼如下：
public ActionResult UploadAction()
{
Result result = new Result();
result.avatarUrls = new ArrayList();
result.success = false;
result.msg = "Failure!";
//取服務器時間+8位隨機碼作爲部分文件名，確保文件名無重複。
string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + HelpClass.CreateRandomCode(8);
//定義一個變量用以儲存當前頭像的序號
int avatarNumber = 1;
//遍歷所有文件域
foreach (string fieldName in Request.Files.AllKeys)
{
HttpPostedFileBase file = Request.Files[fieldName];
//原始圖片(file 域的名稱：__source，如果客戶端定義可以上傳的話，可在此處理）。
if (fieldName == "__source")
{
result.sourceUrl = string.Format("/upload/csharp_source_{0}.jpg", fileName);
file.SaveAs(Server.MapPath(result.sourceUrl));
}
//頭像圖片(file 域的名稱：__avatar1,2,3...)。
else
{
string virtualPath = string.Format("/upload/csharp_avatar{0}_{1}.jpg", avatarNumber, fileName);
result.avatarUrls.Add(virtualPath);
file.SaveAs(Server.MapPath(virtualPath));
avatarNumber++;
}
}
result.success = true;
result.msg = "Success!";
//返回圖片的保存結果（返回內容爲json字符串，可自行構造，該處使用Newtonsoft.Json構造）
// Response.Write(JsonConvert.SerializeObject(result));
return Json(result);
}
接收參數的一個類：
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
namespace MvcApplication1.Models
{
public class Result
{
/// <summary>
/// 表示圖片是否已上傳成功。
/// </summary>
public bool success;
/// <summary>
/// 自定義的附加消息。
/// </summary>
public string msg;
/// <summary>
/// 表示原始圖片的保存地址。
/// </summary>
public string sourceUrl;
/// <summary>
/// 表示所有頭像圖片的保存地址，該變量爲一個數組。
/// </summary>
public ArrayList avatarUrls;
}
public class HelpClass
{
/// <summary>
/// 生成指定長度的隨機碼。
/// </summary>
public static string CreateRandomCode(int length)
{
string[] codes = new string[36] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
StringBuilder randomCode = new StringBuilder();
Random rand = new Random();
for (int i = 0; i < length; i++)
{
randomCode.Append(codes[rand.Next(codes.Length)]);
}
return randomCode.ToString();
}
}
} 3.下面是運行後的效果圖
