首页 » PHP教程 » fullavatareditorphp技巧_JavascriptFullAvatarEditor 多功能可拍摄头像上传编辑器

fullavatareditorphp技巧_JavascriptFullAvatarEditor 多功能可拍摄头像上传编辑器

duote123 2024-11-17 0

扫一扫用手机浏览

文章目录 [+]

下面先容大略的快速入门方法:

1、首先下载必须的文件 地址: http://fullavatareditor.com/download.html ,下载后找到如下图的四个文件。

fullavatareditorphp技巧_JavascriptFullAvatarEditor 多功能可拍摄头像上传编辑器

必须的四个文件

fullavatareditorphp技巧_JavascriptFullAvatarEditor 多功能可拍摄头像上传编辑器
(图片来自网络侵删)

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 href=\"大众http://www.adobe.com/go/getflashplayer\"大众>这里</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 : '100100|5050|3232', //avatar_sizes_desc : '100100像素|5050像素|3232像素'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 : '100100',avatar_sizes_desc : '100100像素'}, 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摄像头调用界面

标签:

相关文章