窗帘换装小程序
项目简介
这是一个从2019年开发，2020年上线的项目，当前仓库是该项目的脱敏重构版，仅用于记录、学习回顾和分享。\
项目架构
如图所展示，项目分为小程序端（H5）、后台前端、后台服务器三大部分，是一个当前行内非常典型的 BS 架构项目。
用到的框架方案都是当时比较成熟的技术（2019 年）。
技术方案
mongodb数据库：开发简单，因为一期时间较短而且项目流量不大redis缓存数据库python图片处理(裁剪，拉伸)node-eggjs对外的后台 web 服务：首次使用约定框架，体验体验pngquant图片压缩：核心功能
一、小程序部分
2D图片拉伸变换
前端需要实现正面的产品通过拉伸透视，嵌入到不同场景中的白色窗体内
需求详细  | 最终效果  | ||
客户提供正面的产品透视图，和一堆不同的场景，产品需要根据不同的场景动态的生成效果图，这个功能一期的上线时前端仅做到了拉伸，图片最终需要在后台服务器合成再传回前端，非常割裂。但是因为后台用 python 实现过相似的接口，所以得出了直接套到这个项目中先上线，后期再重新做到前端的方案。
- 一期：小程序端处理拉伸，后台根据拉伸数据合成新的图片返回给小程序
- 二期：拉伸和合成均在小程序端实现，且拉伸手感优化，非常流畅
橡皮檫+图片合成
简单的说就是用户拍一张自己家窗户的照片，然后通过拉伸，擦除等操作，做一个简单的自定义效果
用户选择图片 > 拉伸产品至合适自己场景的透视 > 分享效果图 | |||||
拉伸产品  | 擦除遮挡  | 效果合成  | |||
防抖和节流
- 优化橡皮檫，最终实现丝滑
- 优化拉伸渲染，最终实现丝滑（对设备有要求）
赖加载+缓存图片
产品非常多，必须采用局部懒加载同时预加载小图来保证用户体验
场景图片也一样，而且场景图片分为前后景
根据终端设备必要准备 webp 和 png
canvas 图片处理
- 后端合成很简单，最终返回大图就可以
- 前端合成需要根据设备的分辨率来渲染最终输出的图片，让低端机型也能分项高清的效果图
PS：
这个拉伸的 canvas 效果在市场上已经有很成熟的项目，是成都那边的公司制作的，也是非常的丝滑，而且全部采用 canvas 达成，效果比我这个流畅
二、后台前端
基础需求
- 一个用户对应一个厂家
- 一个厂家对应多个二维码
- 一个二维码可以关联多个产品系列和场景系列
- 产品系列是由多套产品组成，场景系列同理
老后台工具人了，之前的项目基本都会用市场上最多人用的两个头部框架做（vue-element-admin）或者（ant-design-pro），这次因为是个人项目特意用vue+ElementUI手撸一个，结合之前的使用体验，深刻的体会到一个完善的后台是立在多少头发之上的。当然收获也非常丰富，对很多基础性的知识点进行了加强，特别是 canvas 的使用和优化。
项目难点
- 客户的图片尺寸不固定，比例不固定，大小也不固定，甚至格式也不固定，这需要在上传的时候做好前端的校验
- 场景图片的窗帘位置需要上传后台，要么客户在后台前端可以方便的定义，要么在后台用分析自动识别
- 要生成二维码，且二维码可以加密，而且二维码多种风格的产品，多种风格的场景
- 拖拽上传，同时支持多套产品上传，支持上传队列，实时返回后台处理进度
三、后台服务器
项目难点
- 平时的并发访问不大，但是每年两次，每次 7 天的展会将会是访问高峰
- 客户的图片涉及商业机密，不喜欢上传到别的 cdn，说白了就是不让用 cdn，只能用唯一的服务器
- 图片只能由小程序访问，要做这方面的加密处理
图片拉伸
png 图片压缩
目前市场上公认的几套 png 压缩方案：
- tinyPNG：之前项目用过，必须采用收费方案才符合本次项目要求
- PIL：实测压缩率太低，而且损失页比较高
- OPENCV2：比 PIL 稍微好一点，但是压缩率还是不高
- quantPNG：压缩率逼近 tinyPNG，而且开源可控
毕竟是个人项目，之前已经用过 tinyPNG，所以这次特意选用 quantPNG，毕竟有 tinyPNG 兜底，多长是一套方案以后多一个选择。
详细笔记
- 原型设计
- 需求分析
- 技术方案
- 小程序端
- 后台前端
- 后台后端
- 数据库设计
- 项目部署
- 问题总结
📕 巩固的知识
canvas的各种
api、在小程序端和H5的巨大开发体验差异vuex和eventbus结合，丝滑顺畅的组件通讯管理深刻的认识到
optionsAPI后期维护的艰难，前端处理二进制文件的
API，裁剪，压缩，格式识别，解压linux最小权限管理的原则来部署项目docker 部署下，通过缓存共享
node_modules目录，优化部署空间域名从出生到备案的整个过程，
ssl，域名解析等nginx但个实例做无感知的项目迭代，新旧版本请求无缝衔接