文為【運了個營】原創文章。

歡迎個人分享轉發，媒體轉載請聯系作者，未經允許，不得轉載。

頭像加V生成器

http://tdyservice.diyring.cc/tdyapp/mobile/picaddv/index.html

1.進入工具，上傳頭像，可更換“V標”顏色樣式（有藍標、黃標可選）；

2.調整圖片尺寸，確認裁剪，完成后即可提交；加V頭像生成后，長按圖片保存，就可以更換微信頭像了。

小程序：制作器

微信搜索小程序名稱進入

1.進入“制作器”小程序，在首頁點擊“頭像制作”，上傳手機中的頭像圖片，點擊“開始制作”；

2.在底部菜單點擊“V標”，選擇樣式，并添加到圖片中進行位置調整和縮放；

3.加V頭像生成后，長按保存至手機，即可進行頭像更換。

FullAvatarEditor頭像上傳編輯器支持本地上傳、預覽、視頻拍照等多功能的Flash頭像編輯上傳插件。上傳后，可進行自定義縮放、裁剪、旋轉、定位和調色功能，支持自定義原圖上傳，支持多種接口，兼容性強，跨平臺使用。

下面介紹簡單的快速入門方法：

1、首先下載必須的文件 地址： http://fullavatareditor.com/download.html ，下載后找到如下圖的四個文件。

必須的四個文件

2、在頁面中引入fullAvatarEditor.js、swfobject.js兩個js文件（前提需先引入jq）

<script type="text/javascript" src="/jslib/fullAvatarEditor/swfobject.js"></script>
<script type="text/javascript" src="/jslib/fullAvatarEditor/fullAvatarEditor.js"></script>

3、在頁面中可寫如下結構，FullAvatarEditor會先進行一個flash是否安裝的判斷，如未安裝，將顯示需要下載安裝的提示。反之則直接顯示可調用的部分

<div style="width:800px;margin: 0 auto;">
<h1 style="text-align:center">富頭像上傳編輯器演示</h1>
<div>
<p id="swfContainer">本組件需要安裝Flash Player后才可使用，請從<a >這里</a>下載安裝。
</p>
</div>
</div>

4、具體的調用方法

new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);

swfContainerID 非必須 string用以包裹Flash的HTML元素的ID。

height 必須 numberFlash的高度，默認為 600。

width 必須 numberFlash的寬度，默認為 630。

flashvars 非必須 object將要傳遞到 flash 的 key/value 參數，請參見 配置參數。

callback 必須 functionflash執行某些操作時的回調函數，請參見 回調函數。

示例：

swfobject.addDomLoadEvent(function () {
//avatar_sizes : '100*100|50*50|32*32',
 //avatar_sizes_desc : '100*100像素|50*50像素|32*32像素'
var swf=new fullAvatarEditor("/jslib/fullAvatarEditor/fullAvatarEditor.swf", "/jslib/fullAvatarEditor/expressInstall.swf", "swfContainer", {
id : 'swf',
upload_url : '/plus/douploadavatar.html', //上傳接口
method : 'post', //傳遞到上傳接口中的查詢參數的提交方式。更改該值時，請注意更改上傳接口中的查詢參數的接收方式
src_upload : 0, //是否上傳原圖片的選項，有以下值：0-不上傳；1-上傳；2-顯示復選框由用戶選擇
avatar_box_border_width : 0,
button_visible: true,
checkbox_visible: false,
avatar_sizes : '100*100',
avatar_sizes_desc : '100*100像素'
}, 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 :
switch(msg.type) {
case 0:
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);
}
location.reload();
break;
case 1:
alert('頭像上傳失敗，原因：' + msg.content.msg);
break;
case 2:
alert('頭像上傳失敗，原因：指定的上傳地址不存在或有問題！');
break;
case 3:
alert('頭像上傳失敗，原因：發生了安全性錯誤！請聯系站長添加crossdomain.xml到網站根目錄。');
break;
}
break;
}
}); //當需要用到自定義上傳按鈕時使用以下事件
//document.getElementById("upload").onclick=function(){
 // swf.call("upload");
 //};
});

fullAvatarEditor上傳界面

fullAvatarEditor編輯界面

fullAvatarEditor攝像頭調用界面