富头像上传编辑器

最新推荐文章于 2021-03-06 01:11:59 发布

激情奋斗

最新推荐文章于 2021-03-06 01:11:59 发布

阅读量1.4k

点赞数

分类专栏： jquery插件

jquery插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件，可缩放、裁剪、旋转、定位和调色等...

小巧的身材：文件大小仅仅只有 48 KB，而新浪的头像编辑器组件有 58.1 KB，更有甚者达 80 KB 之多。漂亮的外观：灰色系的外观设计，适用于所有风格的站点。还可轻松地实现换肤。强大的功能：原图支持本地上传、视频拍照和网络加载，图片编辑有缩放、裁剪、旋转、定位和调色等功能。丰富的接口：可自定义头像（大小、数目...）、所有文本（包括其字体，大小，颜色，方便扩展多语言站点）、可在外部接口中定义选项卡、按钮... 跨平台兼容：运行环境Flash Player 10.1+，任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。极致的体验：人性化的设计方式，细节上精心的处理，用户使用起来得心应手。

快速上手

一：从下载页面下载插件包解压后，在页面的 head 标签内引入以下脚本文件

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

二：调用方法

 
          new 
          fullAvatarEditor([ 
          '*/FullAvatarEditor.swf' 
          ,] [ 
          '*/expressInstall.swf' 
          ,] swfContainerID [,height] [,width], flashvars, [callback]);

返回值：object，该对象可调用call方法，请参见 call方法。参数

名称	可选	类型	概述
*/FullAvatarEditor.swf	是	string	插件主swf文件的路径，文件名必须是FullAvatarEditor.swf
*/expressInstall.swf	是	string	expressInstall.swf文件的路径，文件名必须是expressInstall.swf
swfContainerID	否	string	用以包裹Flash的HTML元素的ID。
height	是	number	Flash的高度，默认为 600。
width	是	number	Flash的宽度，默认为 630。
flashvars	否	object	将要传递到 flash 的 key/value 参数，请参见配置参数。
callback	是	function	flash执行某些操作时的回调函数，请参见回调函数。

三：简单示例

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <meta charset= 
          "utf-8" 
          /> 
         
          <title>Simple demo</title> 
         
          <script type= 
          "text/javascript" 
          src= 
          "/scripts/swfobject.js" 
          ></script> 
         
          <script type= 
          "text/javascript" 
          src= 
          "/scripts/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" 
          > 
         
          swfobject.addDomLoadEvent( 
          function 
          () { 
         
          var 
          swf =  
          new 
          fullAvatarEditor( 
          "fullAvatarEditor.swf" 
          , 
          "expressInstall.swf" 
          , 
          "swfContainer" 
          , { 
         
          id :  
          "swf" 
          , 
         
          upload_url :  
          "/upload.php?userid=999&username=looselive" 
          , 
         
          method :  
          "post" 
          , 
         
          src_url :  
          "/samplePictures/Default.jpg" 
          , 
         
          src_upload : 2 
         
          }, 
          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>

运行

更新记录

v2.3：修复头像与实际选取区域偏移 1 像素的BUG；
修复默认加载的原图如果有定位数据时图片不显示的BUG。
v2.2：修复上传的原始图片没有扩展名的Bug。
v2.1：新增上传提交方式的参数：method（值为 get 或 post）；
修善构造函数可定义主swf（FullAvatarEditor.swf）和快速安装flash的swf（expressInstall.swf）的路径。
v2.0：新增在上传完成时（无论成功和失败），是否显示表示上传结果图标的参数：isShowUploadResultIcon；
新增可自定义原图和头像表单域名称的参数：src_field_name 和 avatar_field_names。
v1.9：修复了原图url中带旋转参数时，另外上传/加载的图片会沿用当前旋转值的错误；
视图参数（__initParams）新增选取框尺寸参数，至此视图已臻佳境。
v1.8：~~将追加到上传接口url后的参数的提交方式更改为POST，避免参数中含有特殊字符（如base64中的+号）时产生错误。~~
修复了将头像颜色调整工具隐藏（avatar_tools_visible=false）时，部分版本的 Flash Player 产生异常的错误；
修复了部分奇葩的图片在编码时产生异常的错误。
v1.7：修复了当加载的原图url中带视图参数（__initParams）时，旋转值未正确初始化的错误；
优化了生成头像的速度。
v1.6：修复了后台只能获取upload_url（上传图片的接口）中首个参数的问题；
提升了生成的头像图片的质量。
v1.5：新增头像保存时的缩放系数（需求大尺寸头像而又不想被其破坏页面布局时很有用）；
新增基于原图的初始化参数__initParams（表单字段，用于修改头像时保证视图跟保存头像时一致，帮助提升用户体验）。
v1.4：修复了上传原图时如果是使用摄像头拍照的方式而得到的原图并非来自摄像头的错误。
v1.3：修复头像颜色调整未渲染到生成的图片的bug；
新增生成的图片的质量控制参数 quality。
v1.2：新增是否显示头像颜色调整工具的参数 avatar_tools_visible。
v1.1：将各矩形框的参数独立出来，更加方便外观的表现。