灵感源于某次间歇性踌躇满志 习惯性混吃等死
趁此机会，实践一下函数式组件 😝
传送门 （建议使用微信扫描二维码）
- 选择主题（深 / 浅）
- 增删改 Flag 内容
- 预览 / 保存图片
- 手机 微信/QQ 打开网址
- 手机使用 夸克/小米/华为浏览器
- 电脑使用 Chrome / Firefox / Edge
- 平板使用 Safari / Chrome
- 电脑打开开发者模式，选择手机后，再退出开发者模式，可以搞电脑壁纸（非常规操作）
- 支持 PWA 的浏览器可以添加至桌面
- 在特定位置增加输入框
- 自定义背景图片
- 自定义字体大小
- 可选加底色背景
- 拖拽调整顺序
- PWA（离线存储）
- 数据埋点记录页面加载数据
- 自定义字体
- 图片裁剪
-
保存图片时可能出现白边
-
移动端保存图片隐藏后 按钮的focus状态移除
-
从预览到保存，添加按钮默认显示，未加个数判断
-
背景图片变形
-
自定义图片呼出文件管理器，非相册
如此操作后，会发现移动端只有 Safari 还能下个图片（这里用的 iPad）
Chrome下载出了一个 document，点击保存后毫无反应是常态
download 属性在一些比较常见的手机端浏览器都不支持
还有一种说法是，由于 base64 过长，导致在手机端无法正常下载
解决办法：
① base64 传后端，生成图片后，返图片地址
② base64 图片显示，移动端长按保存
接上个问题，需要通过判断设备来确定下载图片的方式，以及显示的布局样式
最初是通过媒体查询来判断显示的样式的，测试之后发现
当你的平板大小没有那么的凑巧时，你就只能下载手机的壁纸了...
解决办法：
注意：①② 都可以被手动修改！！
① navigator.platform
这个办法有点简单粗暴，如果包含mac或win，就算为PC端
听着感觉没有任何毛病，但是使用 iPad 上的 Safari时这个值为 MacIntel
感觉相对而言，不确定性因素比较大
② navigator.userAgent
见 Detecting a mobile browser 的高赞回答（感觉和navigator.platform 有一点相似）
从某面试题的回答中看，根据 navigator.userAgent进行判断比较多
③ 利用移动端的API
同样来自某面试题的回答 ，其中对移动端的判断方式
手头上的设备测试时均可正常使用
④ 利用已有工具
图片能正常保存，但是会出现各种位置的奇怪白边
微信保存底部出现白边，小米浏览器保存底部和侧边出现白边，Safari顶部出现白边...
顶部出现白边时，如果把标题 "Flag壁纸生成器"去掉，会发现白边消失或者变小了一些
经过各种实验，这个白边会不会出现，取决于从（x, y）取设定的宽高，会不会超出所选的元素
白色，是因为 html2canvas 中设的默认背景颜色是白色
解决办法：
设置参数，固定宽高；y 默认为所选元素离视口的高度，注意调整 y 的值
手指按住屏幕后上拉，下拉的过程中，触发 touchmove 事件，触发的对象为 webview 容器
容器被拖动 => 出现白边
测试时，在 iPad 上使用 Safari 出现这种情况，暂未处理
解决办法：
① 监听事件禁止滑动
②将其装饰为其他功能
设置z-index后，导致这部分元素无法正常保存
解决办法：
参照 html2canvas z-index not effect 中提供的思路
在设置z-index 的同时，设置 position，即可保存