wex5 教程 之 图文讲解 头像裁剪与上传
来源:互联网 发布:中国软件供应商网 编辑:程序博客网 时间:2024/05/18 02:33
视频教程地址:
一 效果演示
1.点击头像,弹出图片裁剪框
2,选择图片,裁剪,上传
3.上传成功后,头像图标更改
二 案例解读
案例目录
wex5为我们提供了一个picut图片裁剪案例,如下:
组件部局
加入file标签用来打开文件管理器进行图片选择,div标签进行图片预览,image标签为裁剪图片
后端服务
后端接收请求参数后,对路径进行了拼接,创建文件流,并创建文件,成功后将成功信息传给前台。
代码解读
引入cropper.js图片裁剪js.
cropper.js为我们提供了一组参数,案例中有注释,
$('.cropper-example-1 > img').cropper(options);找到img对像并初始化参数执行cropper.
用button的click事件,触发file标签的click事件,打开文件管理器,选择图片
选中图片后,触发file标签的fileChange事件,在此事件中,对文件类型image判断。event.target.filts[0]表示从文件管理器选择的多个图片数组,只选其第一个对像,进行URL.createObjectURL(file)转换。
var data = result.toDataURL();得到剪切后的二维流数据,通过baas.send方法异步上传,成功后返回信息。
将成功上传后的图片信息给了image,实现预览。
三 实战改装与代码实现
1 数据库设计
创建头像字段headImgUrl
2 后端改装
将后端上传upload.java复制到当前工程,添加到便于修改,
修改文件路径为当前工程目录
3. 前端改装
点击头像,用windowDialog打开图片裁剪框,并将用户当前行数据传入。
windowDialog数据进行映射。
裁剪框页面data autoLoad为false,接收参数,并加载。
图像预览,做成圆形,并放在标题头部。
根据头像圆形,改变取景框为1:1,即正方形。
用justep.UUID.createUUID()创建图片名称,并拼接imgUrl图片路径。
图片上传成功后,写入数据库imgUrl.
因为我用windowDialog打开的图片裁剪框,确定后将数据传回主页面
工程完成,图标更换完成。
- wex5 教程 之 图文讲解 头像裁剪与上传
- wex5 教程之 图文讲解 文件上传attachmentSimple(1)
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
- wex5 教程 之 图文讲解 视频快照与本地存储
- Android_头像裁剪上传源码与讲解
- wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
- wex5 教程之 图文讲解 Cloudx5一键部署
- wex5 教程 之 图文讲解 拾色器的妙用
- wex5 教程 之 图文讲解 考题模块框架设计
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
- wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器
- wex5 教程 之 图文讲解 智能数据库设计 之(1) 触发器
- wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
- phonegap头像裁剪上传
- iOS 上传头像 裁剪
- java头像裁剪上传
- ubuntu下安装 英伟达 显卡驱动遇到的问题
- 解密CS等valve游戏开头LOGO那个长着阀门的男人。
- adobe flash player 已过期
- Android中如何从网络取json串
- 常用协议的默认端口号
- wex5 教程 之 图文讲解 头像裁剪与上传
- html与css学习小结
- kodi桌面多媒体系统配置方法
- 将两个List根据某个相同字段来进行合并,排序
- DoTween的使用
- Spring学习笔记(二十四):Spring中使用缓存ehcache
- onSaveInstanceState()保存Activity状态
- List容器 的 if (list == null) if( list.size() == 0) 的使用
- 五一E起游移动端源代码