《支持剪裁截圖、旋轉、生成縮略圖等多功能頭像上傳插件fullAvatarEditor》要點：
本文介紹了支持剪裁截圖、旋轉、生成縮略圖等多功能頭像上傳插件fullAvatarEditor，希望對您有用。如果有疑問，可以聯系我們。
相關主題：JS、Jquery插件 / 文件圖片上傳插件
fullAvatarEditor 該flash頭像上傳插件受眾多開發人員好評的優秀，具有以下優勢：
上傳并預覽，用戶可以任意選擇區域，支持頭像旋轉
支持上傳成功，js 回調函數
無論圖片過大還是過小，都可以按照固定大小顯示
支持亮度，對比度，飽和度修飾
支持頭像拍照保存
支持php，asp，jsp，asp.net 調用
兼容性好，任何瀏覽器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用
下面是一個用法示例：
本篇來源于網絡，具體用法建議參考：http://www.snjht.com/jiaocheng/106.html
HTML：
首先我們在頁面上定義了一個隱藏的上傳按鈕。為什么要隱藏呢？這是為了保證圖片成功加載到編輯面板。
<button type="button" id="upload" style="display:none;margin-top:8px;"> swf外定義的上傳按鈕，點擊可執行上傳保存操作 </button>
接著我們要載入jQuery庫和flash需要的組件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/fullAvatarEditor.js"></script>
最后我們看下頭像上傳的調用方法，說明都已經寫在以下代碼里。
swfobject.addDomLoadEvent(function() {
//以下兩行代碼正式環境下請刪除
if (location.href.indexOf('http://') == -1) alert('請于WEB服務器環境中查看、測試！\n\n既 http://*/simpleDemo.html\n\n而不是本地路徑 file:///*/simpleDemo.html的方式');
var swf = new fullAvatarEditor("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", {
id: 'swf',
upload_url: 'upload.php?userid=999&username=looselive',//上傳頭像地址和參數
method: 'post',//傳遞到上傳接口中的查詢參數的提交方式。更改該值時，請注意更改上傳接口中的查詢參數的接收方式
src_upload: 2,//是否上傳原圖片的選項，有以下值：0-不上傳；1-上傳；2-顯示復選框由用戶選擇
avatar_box_border_width: 0,
avatar_sizes: '100*100|50*50|32*32',
avatar_sizes_desc: '100*100像素|50*50像素|32*32像素'
},
function(msg) {
switch (msg.code) {
case 1:
//alert("頁面成功加載了組件！");
break;
case 2:
//alert("已成功加載圖片到編輯面板。");
document.getElementById("upload").style.display = "inline";
break;
case 3:
if (msg.type == 0) {
alert("攝像頭已準備就緒且用戶已允許使用。");
} else if (msg.type == 1) {
alert("攝像頭已準備就緒但用戶未允許使用！");
} else {
alert("攝像頭被占用！");
}
break;
case 5:
if (msg.type == 0) { //msg.content是服務端返回的JSON值
if (msg.content.sourceUrl) {
alert("原圖已成功保存至服務器，url為：\n" + msg.content.sourceUrl + "\n\n" + "頭像已成功保存至服務器，url為：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n傳遞的userid=" + msg.content.userid + "&username=" + msg.content.username);
} else {
alert("頭像已成功保存至服務器，url為：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n傳遞的userid=" + msg.content.userid + "&username=" + msg.content.username);
}
}
break;
}
});
document.getElementById("upload").onclick = function() {
swf.call("upload");
};
});PHP部分：
本文以PHP上傳為例，我們把頭像上傳到upload文件夾，并且上傳后生成了三張頭像縮略圖。
#print_r(urlParse($s));
$dir = "upload";
// 取服務器時間+8位隨機碼作為部分文件名，確保文件名無重復。
$filename = date("YmdHis") . '_' . floor(microtime() * 1000) . '_' . createRandomCode(8);
// 處理原始圖片開始------------------------------------------------------------------------>
//默認的 file 域名稱是__source，可在插件配置參數中自定義。參數名：src_field_name
$source_pic = $_FILES["__source"];
//如果在插件中定義可以上傳原始圖片的話，可在此處理，否則可以忽略。
if ($source_pic) {
if ($source_pic['error'] > 0) {
$msg .= $source_pic['error'];
} else {
//原始圖片的文件名，如果是本地或網絡圖片為原始文件名、如果是攝像頭拍照則為 *FromWebcam.jpg
$sourceFileName = $source_pic["name"];
//原始文件的擴展名(不包含“.”)
$sourceExtendName = substr($sourceFileName, strripos($sourceFileName, "."));
//保存路徑
$savePath = "$dir\php_source_$filename." . $sourceExtendName;
//當前頭像基于原圖的初始化參數（只有上傳原圖時才會發送該數據，且發送的方式為POST），用于修改頭像時保證界面的視圖跟保存頭像時一致，提升用戶體驗度。
//修改頭像時設置默認加載的原圖url為當前原圖url+該參數即可，可直接附加到原圖url中儲存，不影響圖片呈現。
$init_params = $_POST["__initParams"];
$result['sourceUrl'] = toVirtualPath($savePath) . $init_params;
move_uploaded_file($source_pic["tmp_name"], $savePath);
$success_num++;
}
}后臺處理縮略圖在這里就不細說了，請下載壓縮文件查看。
轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/107.html
