开发EZMark之后

前阵子完成了自己代办事项里一个工具：徕卡水印生成。这可能是我第一次做面向其他人的开源工具，今天就记录一些编后感吧。

整体流程

做了几年公司项目我对自己完成一个需求的实力还是有点自信的，但是公司项目都有产品的原型和UI的设计稿做参考，开发自己的项目时却都只能自己想。从开始的技术选型、配色选择、布局规划和需求确定再到最后的测试阶段，功能代码的编写反而是其中最不值一提的部分，第二天就能做出来的功能额外花了一周里每天晚上一两小时的时间去修改细枝末节。 项目完成后的宣传阶段我尝试了录制视频~~（比写代码痛苦多了）~~投放B站，也在小红书、V2发了文字版，前两者没有任何水花，反而V2里获得了一些赞赏也让我比较欣慰。

开发遇到的坑

最开始打算用纯canvas写的，但是在水印的文字布局方面遇到的问题，除非固定位置，否则用canvas去模拟css里的flex布局计算代码还是有点太多，退而求其次换成了html2canvas。

第一个遇到的问题就来自html2canvas，Unocss的重置样式表会导致html2canvas渲染出的图片底部出现空行，需要二次覆盖img的display为unset才能解决。

第二个遇到的并非代码上的问题 ，在测试手机图片时发现exif-js获取不到手机拍摄的图片的exif信息，一开始还以为是exif-js太久没更新的问题，换了几个包结果依旧如此，直到在尝试了在手机上打开测试网页才发现问题在哪。 即便我手机和电脑之间传输文件时用的localsend并不会压缩图片，但是安卓的隐私机制会使得图片在以图片模式传输时自动抹去部分exif信息，解决方法也很简单，以文件模式传输就好。

最后一个问题是在测试大型图片时发现的，工具的使用流程时上传图片后图片会URL.createObjectURL(file)转换成对象url并放置到img标签中展示。但是在上传一张27mb的图片时网页却黑屏了，原因也并不是图片元素变得太大遮住了其它元素，总之基于一种我还不太理解的原因网页显示出了异常，如果这时在开发者工具删掉对应的img则恢复正常。 虽然仍不清楚是什么原理导致的，但只要解决源头即可，把过大的图片压缩一下就能避免这个问题了。