1. 首页
  2. IT资讯

Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器

“u003Cdivu003Eu003Cpu003E FullAvatarEditor头像上传编辑器支持本地上传、预览、视频拍照等多功能的Flash头像编辑上传插件。上传后,可进行自定义缩放、裁剪、旋转、定位和调色功能,支持自定义原图上传,支持多种接口,兼容性强,跨平台使用。u003Cu002Fpu003Eu003Cpu003E 下面介绍简单的快速入门方法:u003Cbru003Eu003Cu002Fpu003Eu003Cpu003E 1、首先下载必须的文件 地址: http:u002Fu002Ffullavatareditor.comu002Fdownload.html ,下载后找到如下图的四个文件。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66a80003cd5ee873016a” img_width=”277″ img_height=”114″ alt=”Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003E必须的四个文件u003Cu002Fpu003Eu003Cpu003E 2、在页面中引入fullAvatarEditor.js、swfobject.js两个js文件(前提需先引入jq)u003Cu002Fpu003Eu003Cpreu003E<script type=”textu002Fjavascript” src=”u002Fjslibu002FfullAvatarEditoru002Fswfobject.js”><u002Fscript>u003Cbru003E<script type=”textu002Fjavascript” src=”u002Fjslibu002FfullAvatarEditoru002FfullAvatarEditor.js”><u002Fscript>u003Cu002Fpreu003Eu003Cpu003E 3、在页面中可写如下结构,FullAvatarEditor会先进行一个flash是否安装的判断,如未安装,将显示需要下载安装的提示。反之则直接显示可调用的部分u003Cu002Fpu003Eu003Cpreu003E<div style=”width:800px;margin: 0 auto;”>u003Cbru003E<h1 style=”text-align:center”>富头像上传编辑器演示<u002Fh1>u003Cbru003E<div>u003Cbru003E<p id=”swfContainer”>本组件需要安装Flash Player后才可使用,请从<a href=”http:u002Fu002Fwww.adobe.comu002Fgou002Fgetflashplayer”>这里<u002Fa>下载安装。u003Cbru003E<u002Fp>u003Cbru003E<u002Fdiv>u003Cbru003E<u002Fdiv>u003Cu002Fpreu003Eu003Cpu003E 4、具体的调用方法u003Cbru003Eu003Cu002Fpu003Eu003Cpreu003Enew fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);u003Cu002Fpreu003Eu003Cpu003EswfContainerID 非必须 string用以包裹Flash的HTML元素的ID。u003Cu002Fpu003Eu003Cpu003Eheight 必须 numberFlash的高度,默认为 600。u003Cu002Fpu003Eu003Cpu003Ewidth 必须 numberFlash的宽度,默认为 630。u003Cu002Fpu003Eu003Cpu003Eflashvars 非必须 object将要传递到 flash 的 keyu002Fvalue 参数,请参见 配置参数。u003Cu002Fpu003Eu003Cpu003Ecallback 必须 functionflash执行某些操作时的回调函数,请参见 回调函数。u003Cu002Fpu003Eu003Cpu003E示例:u003Cu002Fpu003Eu003Cpreu003Eswfobject.addDomLoadEvent(function () {u003Cbru003Eu002Fu002Favatar_sizes : ‘100*100|50*50|32*32’,u003Cbru003E u002Fu002Favatar_sizes_desc : ‘100*100像素|50*50像素|32*32像素’u003Cbru003Evar swf = new fullAvatarEditor(“u002Fjslibu002FfullAvatarEditoru002FfullAvatarEditor.swf”, “u002Fjslibu002FfullAvatarEditoru002FexpressInstall.swf”, “swfContainer”, {u003Cbru003Eid : ‘swf’,u003Cbru003Eupload_url : ‘u002Fplusu002Fdouploadavatar.html’, u002Fu002F上传接口u003Cbru003Emethod : ‘post’, u002Fu002F传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式u003Cbru003Esrc_upload : 0, u002Fu002F是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择u003Cbru003Eavatar_box_border_width : 0,u003Cbru003Ebutton_visible: true,u003Cbru003Echeckbox_visible: false,u003Cbru003Eavatar_sizes : ‘100*100’,u003Cbru003Eavatar_sizes_desc : ‘100*100像素’u003Cbru003E}, function (msg) {u003Cbru003Eswitch(msg.code)u003Cbru003E{u003Cbru003Ecase 1 : u002Fu002Falert(“页面成功加载了组件!”);u003Cbru003Ebreak;u003Cbru003Ecase 2 :u003Cbru003Eu002Fu002Falert(“已成功加载图片到编辑面板。”);u003Cbru003Eu002Fu002Fdocument.getElementById(“upload”).style.display = “inline”;u003Cbru003Ebreak;u003Cbru003Ecase 3 :u003Cbru003Eif(msg.type == 0){u003Cbru003Ealert(“摄像头已准备就绪且用户已允许使用。”);u003Cbru003E} else if(msg.type == 1) {u003Cbru003Ealert(“摄像头已准备就绪但用户未允许使用!”);u003Cbru003E} else {u003Cbru003Ealert(“摄像头被占用!”);u003Cbru003E}u003Cbru003Ebreak;u003Cbru003Ecase 5 :u003Cbru003Eswitch(msg.type) {u003Cbru003Ecase 0:u003Cbru003Eif(msg.content.sourceUrl) {u003Cbru003Eu002Fu002Falert(“原图已成功保存至服务器,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);u003Cbru003E} else {u003Cbru003Eu002Fu002Falert(“头像已成功保存至服务器,url为:\n” + msg.content.avatarUrls.join(“\n\n”)+”\n\n传递的userid=”+msg.content.userid+”&username=”+msg.content.username);u003Cbru003E}u003Cbru003Elocation.reload();u003Cbru003Ebreak;u003Cbru003Ecase 1:u003Cbru003Ealert(‘头像上传失败,原因:’ + msg.content.msg);u003Cbru003Ebreak;u003Cbru003Ecase 2:u003Cbru003Ealert(‘头像上传失败,原因:指定的上传地址不存在或有问题!’);u003Cbru003Ebreak;u003Cbru003Ecase 3:u003Cbru003Ealert(‘头像上传失败,原因:发生了安全性错误!请联系站长添加crossdomain.xml到网站根目录。’);u003Cbru003Ebreak;u003Cbru003E}u003Cbru003Ebreak;u003Cbru003E}u003Cbru003E}); u002Fu002F当需要用到自定义上传按钮时使用以下事件u003Cbru003Eu002Fu002Fdocument.getElementById(“upload”).onclick=function(){u003Cbru003E u002Fu002F swf.call(“upload”);u003Cbru003E u002Fu002F};u003Cbru003E});u003Cu002Fpreu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66ac000291f45cd6dddb” img_width=”544″ img_height=”474″ alt=”Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003EfullAvatarEditor上传界面u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66ab000342787840ec36″ img_width=”638″ img_height=”411″ alt=”Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003EfullAvatarEditor编辑界面u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F66ad000173c712e101c8″ img_width=”663″ img_height=”391″ alt=”Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003EfullAvatarEditor摄像头调用界面u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器

主题测试文章,只做测试使用。发布者:敢吻,转转请注明出处:http://www.cxybcw.com/11406.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code