《支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor》要点:
本文介绍了支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor,希望对您有用。如果有疑问,可以联系我们。
相关主题:JS、Jquery插件 / 文件图片上传插件
fullAvatarEditor 该flash头像上传插件受众多开发人员好评的优秀,具有以下优势:
上传并预览,用户可以任意选择区域,支持头像旋转
支持上传成功,js 回调函数
无论图片过大还是过小,都可以按照固定大小显示
支持亮度,对比度,饱和度修饰
支持头像拍照保存
支持php,asp,jsp,asp.net 调用
兼容性好,任何浏览器 IE10,IE9,IE8,IE7 IE 6,firefox,chrome 都正常使用
下面是一个用法示例:
本篇来源于网络,具体用法建议参考:http://www.jb51.cc/jiaocheng/106.html
HTML:
首先我们在页面上定义了一个隐藏的上传按钮。为什么要隐藏呢?这是为了保证图片成功加载到编辑面板。
<button type=button id=upload style=display:none;margin-top:8px;> swf外定义的上传按钮,点击可执行上传保存操作 </button>
接着我们要载入jQuery库和flash需要的组件。
<script type=text/javascript src=jquery.js></script> <script type=text/javascript src=scripts/swfobject.js></script> <script type=text/javascript src=scripts/fullAvatarEditor.js></script>
最后我们看下头像上传的调用方法,说明都已经写在以下代码里。
swfobject.addDomLoadEvent(function() { //以下两行代码正式环境下请删除 if (location.href.indexOf('http://') == -1) alert('请于WEB服务器环境中查看、测试!\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式'); var swf = new fullAvatarEditor(fullAvatarEditor.swf, expressInstall.swf, swfContainer, { id: 'swf', upload_url: 'upload.php?userid=999&username=looselive',//上传头像地址和参数 method: 'post',//传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式 src_upload: 2,//是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择 avatar_box_border_width: 0, avatar_sizes: '100*100|50*50|32*32', avatar_sizes_desc: '100*100像素|50*50像素|32*32像素' }, 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: if (msg.type == 0) { //msg.content是服务端返回的JSON值 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); } } break; } }); document.getElementById(upload).onclick = function() { swf.call(upload); }; });
PHP部分:
本文以PHP上传为例,我们把头像上传到upload文件夹,并且上传后生成了三张头像缩略图。
#print_r(urlParse($s)); $dir = upload; // 取服务器时间+8位随机码作为部分文件名,确保文件名无重复。 $filename = date(YmdHis) . '_' . floor(microtime() * 1000) . '_' . createRandomCode(8); // 处理原始图片开始------------------------------------------------------------------------> //默认的 file 域名称是__source,可在插件配置参数中自定义。参数名:src_field_name $source_pic = $_FILES[__source]; //如果在插件中定义可以上传原始图片的话,可在此处理,否则可以忽略。 if ($source_pic) { if ($source_pic['error'] > 0) { $msg .= $source_pic['error']; } else { //原始图片的文件名,如果是本地或网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg $sourceFileName = $source_pic[name]; //原始文件的扩展名(不包含“.”) $sourceExtendName = substr($sourceFileName, strripos($sourceFileName, .)); //保存路径 $savePath = $dir\php_source_$filename. . $sourceExtendName; //当前头像基于原图的初始化参数(只有上传原图时才会发送该数据,且发送的方式为POST),用于修改头像时保证界面的视图跟保存头像时一致,提升用户体验度。 //修改头像时设置默认加载的原图url为当前原图url+该参数即可,可直接附加到原图url中储存,不影响图片呈现。 $init_params = $_POST[__initParams]; $result['sourceUrl'] = toVirtualPath($savePath) . $init_params; move_uploaded_file($source_pic[tmp_name], $savePath); $success_num++; } }
后台处理缩略图在这里就不细说了,请下载压缩文件查看。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。