富头像上传编辑器(flash头像上传插件)
富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等...
小巧的身材:文件大小仅仅只有 48 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者达 80 KB 之多以上。
漂亮的外观:灰色系的外观设计,适用于所有风格的站点。还可轻松地实现换肤。
强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。
丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可在外部接口中定义选项卡、按钮...
跨平台兼容:运行环境Flash Player 10.1+,任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。
极致的体验:人性化的设计方式,细节上精心的处理,用户使用起来得心应手。
快速上手
一:从 下载页面 下载插件包解压后,在页面的 head 标签内引入以下脚本文件
1
2
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
二:调用方法
1
new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
返回值:object,该对象可调用call方法,请参见 call方法。
参数
名称 可选 类型 概述
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://xxx.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("swfContainer", {
id: 'swf',
upload_url: '/Upload.php',
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").οnclick=function(){
swf.call("upload");
};
});
</script>
</body>
</html>
运行
更新记录
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:将各矩形框的参数独立出来,更加方便外观的表现。
富头像上传编辑器(flash头像上传插件)相关推荐
- php+flash头像上传组件
有会员系统的网站一般都会有一个头像上传组件,一般做的最简单的是 这种方式优点是代码写的简单,只要判断图片大小和类型,然后更新数据库.但是用户体验不高.而且网站其他页面如果要使用较小的20X20或148 ...
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- DISCUZ论坛插件h5手机电脑头像上传3.7.1带扩展插件【收集免费分享】
一个支持电脑和手机h5技术头像上传的插件. 说明:本插件h5电脑版和h5手机版为自主全新开发的触屏版头像上传,体验好,性能好,绿色. 主要特点:支持H5电脑版和H5手机版头像上传. 支持鼠标和触屏操作 ...
- 富文本编辑器CKeditor文件上传下载SmartUpload插件
目录 富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
- php头像上传思路,PHP头像上传,php头像上传_PHP教程
PHP 头像上传,php头像上传 嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶... 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了, ...
- 微信curl上传客服头像接口遇到的坑
项目要做一个微信客服管理的功能,于是从上礼拜开始就着手开发,首先看微信公众平台开发者文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&i ...
- 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
- Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
最新文章
- slc、mlc、tlc闪存芯片颗粒区别介绍
- mysql real escape,mysql_real_escape_string()函数
- pr_debug、dev_dbg等动态调试三
- Windows上通过bat实现不同数据库之间同步部分表的部分字段数据
- metal分析是什么意思_metal分析.pptx
- C++ 函数重载碰到默认的参数
- verycd重整——《TrainSignal视频教程》(TrainSignal)[ISO]
- mysql主从复制(master 、salve)
- 汇编实验 用Radasm设计生成一个对话框,实现如图1.1所示的四则运算计算器
- OpenCV图像处理之直方图
- 市场调研报告-全球与中国船用下水推车市场现状及未来发展趋势
- 华为 - 路由交换基础
- 基于网络安全的Docker逃逸
- SRC——教育漏洞平台
- 网传美团今年应届生年薪 35w+,严重倒挂老员工,为什么互联网大厂校招的薪资一年比一年高?
- taptap领礼包怎么显示服务器繁忙,原神taptap预约奖励领取教程 taptap预约奖励怎么领取...
- 研发管理心得,从技术小白做到CTO(研发总监)的辛酸之路
- 小白也能看懂的Pandas实操演示教程(下)
- 美丽即可用抑或可用即美丽?
- 财会法规与职业道德【4】
热门文章
- 【疑难杂症】allennlp安装报错:Installing build dependencies ... error
- 如何找到msdn中文文档呢?
- 让你的LCD1602显示用户自定义字符 Arduino-LiquidCrystal库的createChart()介绍
- 二维码生成 单个下载 批量打包下载
- redis实战教程_Redis详解新手教程_Redis入门到精通
- 7-CNN-minist数据分类
- 【QT】自定义日历弹窗
- picasso加载图片
- 谷歌浏览器屏蔽广告的插件
- 51单片机简易秒表的设计(含源代码、编译过的 HEX 文件以及仿真图)