富头像上传编辑器文档(from www.sysoft.cc)

调用方法

  • new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
  • 返回值：object，该对象可调用call方法，请参见 call方法。

swfContainerID

  • 用以包裹Flash的HTML元素的ID。

height

  • Flash的高度，默认为 600。

width

  • Flash的宽度，默认为 630。

flashvars 配置参数

名称 类型 默认值 描述
id String fullAvatarEditor 接收消息的swf的ID，用以区分同一页面如果存在多个组件。
upload_url String null 上传图片的接口。该接口需返回一个json字符串，且会原样输出到 callback 回调函数 的参数对象的属性content中，请参见 上传接口的返回数据。
quality Number 100 生成的头像图片的质量，取值范围1-100，数值越大生成的图片越清晰，相对地文件也会越大。
isShowUploadResultIconv2.0 Boolean true 在上传完成时（无论成功和失败），是否显示表示上传结果的图标。
原图片
src_url String   默认加载的原图片的url。
src_size String 2MB 选择的本地图片文件所允许的最大值，必须带单位，如888Byte，88KB，8MB
src_upload Number 0 是否上传原图片的选项，有以下值： 0 ---不上传 1 ---上传 2 ---显示复选框由用户选择
src_field_namev2.0 String __source 原图片的表单域名称，上传原图片时可用。
src_size_over_limit String 文件大小（{0}）超出限制（2MB）\n请重新上传 当选择的原图片文件的大小超出指定最大值时的提示文本。 可使用占位符{0}表示选择的原图片文件的大小。
src_size_over_limit_font String   上一项的字体。
src_size_over_limit_font_size String 14 上一项的字体大小（单位：px）。
src_box_width Number 300 原图编辑框的宽度。
src_box_height Number 300 原图编辑框的高度。
src_box_background String #fff 原图编辑框的背景颜色。格式如：#888，#888888
src_box_border_width Number 1 原图编辑框的边框宽度。
src_box_border_color String #D8D8D8 原图编辑框的边框颜色。格式如：#888，#888888
选项卡
tab_visible Boolean true 是否显示选项卡。
tab_font String   选项卡的字体。
tab_font_size Number 14 选项卡的字体大小（单位：px）。
tab_color String #666 选项卡的文本颜色。格式如：#888，#888888
tab_upload_text String 上传本地照 本地上传选项卡的文本。
tab_webcam_text String 摄像头拍照 摄像头拍照选项卡的文本。
tab_upload_width Number 0（表示自适应） 本地上传选项卡的宽度。
tab_webcam_width Number 0（表示自适应） 摄像头拍照选项卡的宽度。
tab_active String upload 默认激活的选项卡。 upload----表示本地上传选项卡； webcam---表示摄像头拍照选项卡。
图片选择框
browse_box_width Number 300 图片选择框的宽度。
browse_box_height Number 300 图片选择框的高度。
browse_box_background String #fff 图片选择框的背景颜色。格式如：#888，#888888
browse_box_border_width Number 1 图片选择框的边框宽度。
browse_box_border_color String #D8D8D8 图片选择框的边框颜色。格式如：#888，#888888
browse_box_align String center 图片选择框的水平对齐方式。有如下值： left：左对齐 center：居中对齐 right：右对齐， 数值：相对于舞台的x坐标
browse_button String 请点击按钮选择图片 选择图片按钮的文本。
browse_button_color String #000 选择图片按钮的文本颜色。格式如：#888，#888888
browse_button_font String   选择图片按钮的文本字体。
browse_button_font_size Number 14 选择图片按钮的文本字体大小（单位：px）。
browse_button_y Number 20 选择图片按钮相对于图片选择框的 y 坐标。
browse_tip String 仅支持JPG、JPEG、GIF、PNG格式的图片文件\n文件不能大于2MB 选择图片的规则提示文本。
browse_tip_color String #888 上一项的颜色。格式如：#888，#888888
browse_tip_font String   选择图片的规则提示文本的字体。
browse_tip_font_size Number 14 选择图片的规则提示文本的字体大小（单位：px）。
browse_tip_y Number 250 选择图片的规则提示文本相对于图片选择框的 y 坐标。
按钮和复选框
button_visible Boolean true 是否显示保存、取消、拍照按钮。
button_color String #666 按钮文本的颜色。格式如：#888，#888888
button_font String   按钮文本的字体。
button_font_size Number 14 按钮文本的字体大小（单位：px）。
button_upload_text String 保存 上传按钮的文本。
button_upload_width Number 0（表示自适应） 上传按钮的宽度。
button_cancel_text String 取消 取消按钮的文本。
button_cancel_width Number 0（表示自适应） 取消按钮的宽度。
button_shutter_text String 拍照 拍照按钮的文本。
button_shutter_width Number 0（表示自适应） 拍照按钮的宽度。
checkbox_visible Boolean false 是否上传原图片的复选框的可见性。
checkbox_text String 是否上传原图片？ 是否上传原图片的复选框的文本。
checkbox_color String #666 是否上传原图片的复选框的文本颜色。格式如：#888，#888888
checkbox_font String   是否上传原图片的复选框的文本字体。
checkbox_font_size Number 14 是否上传原图片的复选框的文本字体的大小（单位：px）。
头像
avatar_box_border_color String #D8D8D8 头像框的边框颜色。格式如：#888，#888888
avatar_box_border_width Number 1 头像框的边框宽度。
avatar_sizes String 100*100|50*50|32*32 表示一组或多组头像的尺寸。其间用"|"号分隔。
avatar_sizes_desc String 100*100像素|50*50像素|32*32像素 头像尺寸的提示文本。多个用"|"号分隔，与上一项对应。
avatar_field_namesv2.0 String __avatar1|__avatar2|__avatar3 头像的表单域名称，多个用"|"号分隔，与 avatar_sizes 项对应。
avatar_intro String 最终会生成以下尺寸的头像，请注意是否清晰 头像简介。
avatar_intro_color String #666 头像简介文本的颜色。格式如：#888，#888888
avatar_intro_font String   头像简介文本的字体。
avatar_intro_font_size Number 14 头像简介文本的字体大小（单位：px）。
avatar_tools_visible Boolean true 是否显示头像颜色调整工具。
avatar_tools_brightness_text String 亮度 头像颜色调整工具-亮度的文本。
avatar_tools_contrast_text String 对比度 头像颜色调整工具-对比度的文本。
avatar_tools_saturation_text String 饱和度 头像颜色调整工具-饱和度的文本。
avatar_tools_color String #666 头像颜色调整工具的文本的颜色。格式如：#888，#888888
avatar_tools_font String   头像颜色调整工具的文本字体。
avatar_tools_font_size Number 14 头像颜色调整工具的文本字体大小（单位：px）。
avatar_scale Number 1 头像保存时的缩放系数。如：默认的头像分别为100*100、50*50、32*32像素，如果该参数为2，那么保存后的头像的尺寸将为200*200、100*100、64*64像素（即头像大小乘以缩放系数）。该参数在为免头像过大而把页面撑破、破坏页面布局时很有用。
摄像头相关
webcam_box_width Number 300 视频框的宽度。
webcam_box_height Number 300 视频框的高度。
webcam_box_background String #fff 视频框的背景颜色。格式如：#888，#888888
webcam_box_border_width Number 1 视频框的边框宽度。
webcam_box_border_color String #D8D8D8 视频框的边框颜色。格式如：#888，#888888
webcam_box_align String center 视频框的水平对齐方式。有如下值： left：左对齐 center：居中对齐 right：右对齐， 数值：相对于舞台的x坐标
webcam_unavailable_title String 发生错误，可能的原因如下 摄像头不可用的标题。
webcam_unavailable_title_color String #666 摄像头不可用的标题的颜色。格式如：#888，#888888。
webcam_unavailable_title_font String   摄像头不可用的标题的字体。
webcam_unavailable_title_font_size Number 14 摄像头不可用的标题的字体大小（单位：px）。
webcam_unavailable_content String 您还没有安装摄像头；\n\n您的摄像头正被其他程序所占用；\n\n您的摄像头已被拔出。 摄像头不可用的描述。
webcam_unavailable_content_color String #888 摄像头不可用的描述文本的颜色。格式如：#888，#888888。
webcam_unavailable_content_font String   摄像头不可用的描述文本的字体。
webcam_unavailable_content_font_size Number 14 摄像头不可用的描述文本的字体大小（单位：px）。
webcam_unavailable_refresh String 请确认摄像头可用后点此刷新进行尝试 摄像头不可用时的刷新链接的文本。
webcam_unavailable_refresh_color String #666 摄像头不可用时的刷新链接的文本颜色。格式如：#888，#888888。
webcam_unavailable_refresh_font String   摄像头不可用时的刷新链接的文本字体。
webcam_unavailable_refresh_font_size Number 14 摄像头不可用时的刷新链接的文本字体大小（单位：px）。
webcam_muted_title String 您选择了拒绝使用摄像头 拒绝使用摄像头时的标题。
webcam_muted_title_color String #666 拒绝使用摄像头时的标题的颜色。格式如：#888，#888888。
webcam_muted_title_font String   拒绝使用摄像头时的标题的字体。
webcam_muted_title_font_size Number 14 拒绝使用摄像头时的标题的字体大小（单位：px）。
webcam_muted_content String 若要启用摄像头，\n\n请打开 Flash Player 设置对话框,\n\n并在弹出的对话框中选择允许。 拒绝使用摄像头时的描述。
webcam_muted_content_color String #888 拒绝使用摄像头时的描述文本的颜色。格式如：#888，#888888。
webcam_muted_content_font String   拒绝使用摄像头时的描述文本的字体。
webcam_muted_content_font_size Number 14 拒绝使用摄像头时的描述文本的字体大小（单位：px）。
webcam_muted_enable String 点击此处打开 Flash Player 设置对话框 启用摄像头的链接文本。
webcam_muted_enable_color String #666 启用摄像头的链接文本的颜色。格式如：#888，#888888。
webcam_muted_enable_font String   启用摄像头的链接文本的字体。
webcam_muted_enable_font_size Number 14 启用摄像头的链接文本的字体大小（单位：px）。
提示文本
tooltip_color String #666 提示文本的颜色。格式如：#888，#888888
tooltip_font String   提示文本的字体。
tooltip_font_size Number 14 提示文本的字体大小（单位：px）。
tooltip_zoomIn String 放大 放大工具的提示文本。
tooltip_zoomOut String 缩小 缩小工具的提示文本。
tooltip_zoomNone String 按窗口大小显示 按窗口大小显示的提示文本。
tooltip_rotateCW String 顺时针旋转 顺时针旋转工具的提示文本。
tooltip_rotateCCW String 逆时针旋转 逆时针旋转工具的提示文本。
tooltip_reset String 重置 头像颜色调整的重置按钮的提示文本。

callback 回调函数

  • 执行该函数时，函数中的this关键字指向表示swf的HTMLObjectElement，并且会给函数传递一个表示事件消息的json对象作为参数。
  • json对象的属性如下：
  • code : Number主要用来辨识消息的具体来源和内容，以便客户端知道如何处理。
  • type : Number0 表示成功，1 表示警告，2 表示错误，3 表示异常。
  • content : *表示消息的内容。
可能值枚举表
code type content 描述
1 0   页面成功加载组件后触发的事件消息。
2
  • 0
  • 2
  
  • 加载图片成功时触发的事件消息。
  • 加载图片失败时触发的事件消息。
3
  • 0
  • 1
  • 2
  
  • 摄像头已准备就绪且用户已允许使用。
  • 摄像头已准备就绪但用户未允许使用！
  • 摄像头被占用！
4 2 选择的原图片文件大小，带单位。如：8.88MB 选择的原图片文件大小超出了指定的值。
5
  • 0
  • 1
  • 2
  • 3
  • 上传接口返回的内容。
  • 表示错误原因的字符串。
  • 表示图片上传成功。
  • 表示图片上传失败，失败原因由上传接口定义！
  • 表示图片上传失败，指定的上传地址不存在或有问题！
  • 表示图片上传失败，发生了安全性错误！

call 方法，这些方法在自定义外界元素（如tab、button）时很有用。

  • object.call(methodName[, methodParameter]);
methodName：String 要调用的flash内的方法名称。
methodParameter：String 传递到该方法的参数。
  • 该方法供 new fullAvatarEditor 返回的对象（HTMLObjectElement）调用，主要是调用flash里的方法。
可调用的方法枚举表
methodName methodParameter 功能描述
changePanel upload 或 webcam 切换到本地上传图片选择面板或摄像头拍照面板。
loadPic 要加载的图片的url。 加载网络图片。
pressShutter   执行拍照操作。
srcUpload true|false 设置是否上传原图片。
upload   执行上传保存的操作。

发送至上传接口的数据

发送方式： post
原图file域： Field Name： __source
File Name： 如果是本地和网络图片为原始文件名（不含扩展名）、如果是摄像头拍照则为 *FromWebcam
头像file域： Field Name： __avatar1，__avatar2，__avatar3，... 即 __avatar + 1至头像总数。
File Name： 同上。
其他文本域： Field Name： __initParams（String） 加载指定url的原图时将该参数追加到url中，可保证视图跟保存头像时一致。可用于修改头像，帮助提升用户体验。注意：上传原图时才会发送该数据。

上传接口的返回数据

接口至少必须返回一个包含名为“success”、值为true（表示上传成功）或false（表示上传失败）的json字符串，且会原样输出到 callback 回调函数 的参数对象的属性content中。
例：当上传成功或失败时可分别返回以下json对象。

?


1

2

3

4

5

{

    "success" : true,//该名/值对是必须定义的，表示上传成功

    "sourceUrl" : "原图片位于服务器的虚拟路径",

    "avatarUrls": ["头像图片位于服务器的虚拟路径",..]

}

或

?


1

2

3

4

{

    "success" : false,//该名/值对是必须定义的，表示上传失败

    "msg" : "上传的原图文件大小超出限值了！"

}

在进行调用时即可如下使用获取返回的数据

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

var swf = new fullAvatarEditor(‘swf‘, {

    id: ‘swf‘,

    upload_url: ‘/upload.php‘

}, function(json){

    if (json.code == 5)

    {

        switch(json.type)

        {

            //表示图片上传成功。

            case 0:

                alert(‘原图片位于服务器的虚拟路径为‘+json.content.sourceUrl);

                alert(‘头像图片位于服务器的虚拟路径为‘+json.content.avatarUrls.join(‘,‘));

            break;

            case 1:

                alert(‘头像上传失败，原因：‘ + json.content.msg);//will output:头像上传失败，原因：上传的原图文件大小超出限值了！

            break;

            case 2:

                alert(‘头像上传失败，原因：指定的上传地址不存在或有问题！‘);

            break;

            case 3:

                alert(‘头像上传失败，原因：发生了安全性错误！请联系站长添加crossdomain.xml到网站根目录。‘);

            break;

        }

时间： 2024-10-10 05:36:12

富头像上传编辑器文档(from www.sysoft.cc)的相关文章

web开发经验——富头像上传编辑器的使用

富头像编辑器是一个很好的头像图片上传控件,能够对图片进行简单的处理,例如:剪切.调节亮度等功能:富头像编辑器拥有很的参数配置,可根据自己的需要配置控件的功能:该控件要求浏览器需安装Flash Player后才能使用:下面是我做的一个小的Demo以说明富头像编辑器的使用方法. 1.前台页面 需引用js文件和初始化富头像编辑器,脚本代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

富头像上传编辑器----很好用的上传照片和拍照功能

富头像编辑器是一个很好的头像图片上传控件,能够对图片进行简单的处理,例如:剪切.调节亮度等功能:富头像编辑器拥有很的参数配置,可根据自己的需要配置控件的功能:该控件要求浏览器需安装Flash Player后才能使用:下面是我做的一个小的Demo以说明富头像编辑器的使用方法. 1.前台页面 需引用js文件和初始化富头像编辑器,脚本代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

艾恩ASP无组件上传类(上传组件)说明文档(from www.sysoft.cc)

艾恩ASP无组件上传类(上传组件)说明文档2010-1-18 By Anlige一.简介自从接触ASP就开始接触上传,看过一些上传类,但是总感觉封装的还是不够简单,因此自己尝试写一个能够用最少最简单的代码实现各种上传方式的上传类.在学校期间就开始写,一点点的完善.优化,到现在的版本,现在的版本能适应各种上传方式.上传类的主要的功能如下:1.自由设置最大上传大小.单文件最大上传大小2.自由设置允许上传的文件类型3.可设置文本的编码,以适应各种上传环境4.内置进度条,a用户可选择开启和关闭5.多种错

Yii2.0 集成使用富头像上传编辑器

在开发过程中,我们会用到头像上传的功能.这里给大家推荐一款比较流行的头像上传组件,FullAvatarEditor 2.3(富头像上传编辑器). 实际效果如图所示: 1.下载组件,下载地址:http://www.fullavatareditor.com/download.html: 2.在所需页面上导入相关js文件: <script type="text/javascript" src="FullAvatarEditor2.3/scripts/swfobject.js&

上传Text文档并转换为PDF(解决乱码)

前些日子,Insus.NET有分享一篇<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 它是按最简单与默认方式来处理. 它在处理带有中文的文本文件时,转换为PDF时,中文不能正常显示,乱码. 本篇算得上是在那基础上,进行重构,解决乱码问题. 为了解决字符问题,我们需要在专案下创建一个目录,如Fonts是用来存储字体.我们去windows目录下把SIMSUN.TTC字体拷贝过来. 在控制器的PostFile()操作中,也得需

上传Text文档并转换为PDF

今天在ASP.NET MVC环境中学习一些PDF相关的知识,想法是上传文件成功时,并把文件转换为PDF文档. 打开你的专案,运行NuGet包管理器,下载一个叫iTextSharp的东东: 点击Install,按钮提示确认安装,成功安装或是检测到专案中已经安装,它状态显示如下: 在控制器创建操作(Action): 再在控制器中,创建另一个操作方法,是处理文件上传以及转换PDF的功能: FileStream类去打开文件并读取,获取文档的byte[] array.iTextSharp类对象PdfWri

Bootstrap FileInput 多图上传插件 文档属性说明

Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source=itdadao&utm_medium=referral这货融合bootstrap框架,界面相当不错,api非常丰富,可定制内容能满足绝大数的场景. 最近在撸一个项目,用到它,花时间收集了一些文档,整理并翻译了部份内容.备用. github 地址 https://github.com/kartik-

HTTP文件上传插件开发文档-JSP

版权所有 2009-2016 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/http-uploader/index.asp 在线演示:http://www.ncmem.com/products/http-uploader2/index.asp, 开发文档:asp,jsp,php,asp.net, 升级日志:http://www.cnblogs.com/xproer/archive/20

php头像上传预览

php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submit刷新式上传.我为大家介绍两种异步非刷新式上传图片+图片预览:第一种,通过现成的uploadfy插件进行上传,网上好多实例.不过我重点为大家介绍的是第二种,通过Ajax上传图片.因为使用uploadfy插件需要设备支持swf格式的Flash,所以对大多数手机来说,第一种方式就