Python 综合 Web 案例_在线为头像添加装饰
木子昭
2018.01.03 19:18* 字数 448
前几天元旦, 用 Python 为自家公众号做了一个 "革面" 的活动页面, 活动的效果非常好, 分享一下实现过程:
- 前端: BootStrap, Jquery, Jcrop
- 后端: Django, Pillow
第一步: 选择头像
- 这是一个简单的前端页面, 为了追求效果, 将装饰红色以外的部分, 进行透明处理, 这样透过背景的纹理, 会显得自然, 简洁
- 简单的响应处理, 用户点击后, 边框变色, 下一步按钮会延时浮现出来, 引导用户点击 "下一步"
第二步: 上传头像, 并实时裁剪
- 这里圆形区为 canvas 实时预览, 裁剪区使用了 Jcrop 插件 (有些安卓机不太支持这个插件), 用户点击 "选择头像" 后, 会调用系统文件, 上传图片
- 上传图片后, 图片会实时显示, 用户可以通过拖动 8 点框裁剪, 裁剪效果会在上方实时显示
- 用户拖动 8 点框后, 下方的 "小汇出图" 会延迟 1 秒钟显示出来 (引导用户点击, 获取图片)
第三步: 生成图片, 长按保存
- 将页面所有元素隐藏, 在后台将上一步的预览图片发送到后端, 后端 Django 使用 Pillow 进行图像合成, 将成品返回到前端页面, 用户长按保存后, 保存完成
这个是小程序的在线演示地址: http://www.3qv1oo.com/xmt/start_game/
小程序的源码还在整理完善中, 如果感兴趣, 可以点赞, 然后私信我, 学习之用的话, 源码可无偿提供...
程序员 © 著作权归作者所有
举报文章
来源: http://www.jianshu.com/p/715b747c04c8