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

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

一 效果演示

      1.点击头像,弹出图片裁剪框

       103330_JtfQ_3023705.png

  2,选择图片,裁剪,上传

    103506_5nDB_3023705.png

  3.上传成功后,头像图标更改

  103554_kH3P_3023705.png

二 案例解读

     案例目录

     wex5为我们提供了一个picut图片裁剪案例,如下:

    110414_uqgB_3023705.png

    组件部局

    111443_1swL_3023705.png

 

      加入file标签用来打开文件管理器进行图片选择,div标签进行图片预览,image标签为裁剪图片

    后端服务

      114747_hHKz_3023705.png

    后端接收请求参数后,对路径进行了拼接,创建文件流,并创建文件,成功后将成功信息传给前台。

     代码解读

     110753_HeRq_3023705.png

         引入cropper.js图片裁剪js.

        111814_7gFL_3023705.png

                111843_9Qvf_3023705.png

              cropper.js为我们提供了一组参数,案例中有注释,

              $('.cropper-example-1 > img').cropper(options);找到img对像并初始化参数执行cropper.

          112747_b31C_3023705.png

       用button的click事件,触发file标签的click事件,打开文件管理器,选择图片

       113013_SjMG_3023705.png

      选中图片后,触发file标签的fileChange事件,在此事件中,对文件类型image判断。event.target.filts[0]表示从文件管理器选择的多个图片数组,只选其第一个对像,进行URL.createObjectURL(file)转换。

      114029_lcW7_3023705.png

        var data = result.toDataURL();得到剪切后的二维流数据,通过baas.send方法异步上传,成功后返回信息。

     114253_27qo_3023705.png

     将成功上传后的图片信息给了image,实现预览。

三 实战改装与代码实现

      1 数据库设计

        115025_3TGV_3023705.png

        创建头像字段headImgUrl

      2 后端改装

              将后端上传upload.java复制到当前工程,添加到便于修改,

         114539_tRAY_3023705.png

          修改文件路径为当前工程目录

             115139_CXEh_3023705.png

     3. 前端改装

             点击头像,用windowDialog打开图片裁剪框,并将用户当前行数据传入。

                120547_kJZC_3023705.png

           windowDialog数据进行映射。

            120858_5e7p_3023705.png

             裁剪框页面data autoLoad为false,接收参数,并加载。

             120800_oCR3_3023705.png

              120519_6R8e_3023705.png

           

               图像预览,做成圆形,并放在标题头部。

          115753_UEKK_3023705.png

      根据头像圆形,改变取景框为1:1,即正方形。

    115943_44fC_3023705.png

     用justep.UUID.createUUID()创建图片名称,并拼接imgUrl图片路径。

          120115_Skgh_3023705.png

    图片上传成功后,写入数据库imgUrl.

120228_fguI_3023705.png

    因为我用windowDialog打开的图片裁剪框,确定后将数据传回主页面

    120312_ROwx_3023705.png

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

转载于:https://my.oschina.net/fangziffff123/blog/787354

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值