文档章节

wex5 教程 之 图文讲解 头像裁剪与上传

邯郸 戏曲开发
 邯郸 戏曲开发
发布于 2016/11/14 12:10
字数 573
阅读 288
收藏 0

 视频教程地址:http://v.youku.com/v_show/id_XMTgyMDE5NjEyOA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0

一 效果演示

      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打开的图片裁剪框,确定后将数据传回主页面

    

   工程完成,图标更换完成。

© 著作权归作者所有

邯郸 戏曲开发
粉丝 4
博文 6
码字总数 3874
作品 0
邯郸
其他
私信 提问
WeX5 快速开发平台 V3.4 正式版发布

WeX5 V3.4 正式版下载地址 http://pan.baidu.com/s/1jHBUDtc WeX5 V3.4正式版发布说明: 1、新增移动端模板32个:包括首页、数据列表、数据展示、注册、登录、搜索等常用单页面模板和完整应用...

muyu
2016/04/01
5.8K
17
WeX5 快速开发平台V3.5预览版 发布(2016-6-3)

V3.5两大核心: 1- XCloud的推出,开发应用后可一键云部署; 2- 提高质量品质,修复缺陷; WeX5 V3.5预览版(Windows&Mac OS)下载地址:http://pan.baidu.com/s/1pL3WjOZ 一、XCloud一键部署...

muyu
2016/06/04
4.9K
11
WeX5 V3.3 正式版,跨端移动开发框架

WeX5 V3.3 正式版发布了,新增特性: 1、提供超轻量高性能服务框架(XBaaS),支持免代码或少量代码快速开发操作数据表的CRUD服务,目前v3.3版本提供了XBaaS的java和.net语言实现,后续会提供...

muyu
2016/01/19
3.5K
10
苹果App,不用上传苹果商店,如何让其他人也能安装?

昨天在OSC看到WeX5的整理分享,今天没找到,特意上来问下,请WeX5兄,或哪位收藏了的再发一下 感激不尽!

胡同串串
2015/05/28
20.1K
5
快来体验我开发的app!一次搞定苹果、安卓、Web端

(以下内容全部由开发者提供;我们在OSChina发布前已取得开发者本人同意) 是不是觉得很帅?欢迎"勾搭"^_^ 开发者 长春鱼熊企业管理咨询有限公司 联系人: 刘文生 联系QQ: 67550351 网址:www...

WeX5移动开发云
2015/07/21
1
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部