fullavatareditor java上传_支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor...

《支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor》要点:

本文介绍了支持剪裁截图、旋转、生成缩略图等多功能头像上传插件fullAvatarEditor,希望对您有用。如果有疑问,可以联系我们。

fullAvatarEditor 该flash头像上传插件受众多开发人员好评的优秀,具有以下优势:

上传并预览,用户可以任意选择区域,支持头像旋转

支持上传成功,js 回调函数

无论图片过大还是过小,都可以按照固定大小显示

支持亮度,对比度,饱和度修饰

支持头像拍照保存

支持php,asp,jsp,asp.net 调用

兼容性好,任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用

下面是一个用法示例:

HTML:

首先我们在页面上定义了一个隐藏的上传按钮。为什么要隐藏呢?这是为了保证图片成功加载到编辑面板。

swf外定义的上传按钮,点击可执行上传保存操作

接着我们要载入jQuery库和flash需要的组件。

最后我们看下头像上传的调用方法,说明都已经写在以下代码里。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++;

}

}

后台处理缩略图在这里就不细说了,请下载压缩文件查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值