从嵌入式到前端的探索之旅，分享 5 个开源 Web 小工具

我是一名嵌入式开发工程师，在软硬件开发领域摸爬滚打多年。从单片机到 ARM，从裸机编程到 Linux，从硬件调试到驱动开发，从 RTOS 到图形界面，我在嵌入式世界里积累了不少经验。

但当我想要开发互联网产品时，我发现了一个全新的世界 ------ Web 开发。那些在嵌入式领域习以为常的概念，在 Web 开发中变得陌生：DOM 操作、事件处理、CSS 布局、异步编程...... 一切都让我感到既兴奋又困惑。

学习之路

于是，大概五年前，我决定从零开始学习 Web 前端开发。这不是一次简单的技术栈切换，而是一次思维方式的转变：

从 C 语言到 JavaScript：从静态类型到动态类型，从编译时到运行时；
从硬件抽象到 DOM 操作：从寄存器操作到浏览器 API；
从线程管理到异步编程：从轮询到事件驱动；
从固定布局到响应式设计：从像素级精确到弹性布局。

在这个过程中，我通过 Head First 系列书籍来学习。在完成了示例项目后，我发现还是意犹未尽，想着与其只看教程，不如动手做点有用的东西。于是，我根据自己的需求开发了几个 Web 在线小工具，每完成一个都有一种神奇的成就感。

最近，我重新整理了 5 个小工具的代码到 GitHub，并且通过 GitHub Pages 的方式提供在线访问，欢迎你来使用或改进~

项目介绍

① 水印工具（Watermarking）

我们平常租房子、办业务，需要提交身份证照片，为了避免身份证照片被滥用，通常需要打个水印。但是市面上的工具，往往需要下载 App，还要将照片上传到别人的服务器，既繁琐又不安全。因此我做了一个简单的 Web 工具，基于浏览器本地 API，实现为图片添加文字水印，并支持自定义水印颜色、大小、角度、间距、透明度。

特别说明：虽然这个 Web 工具需要用网络浏览器打开，但使用过程中不需要上传图片，所有操作均在本地进行。

学习要点：

Canvas API 的使用
文件上传和处理
图片下载功能

GitHub 地址：https://github.com/luhuadong/watermarking

在线使用：https://luhuadong.github.io/watermarking/

② 颜色拾取工具（Color Picker）

做前端开发的朋友都知道，页面配色是一项很重要、很讲究品味的工作。我们常常需要参考别人的设计，从屏幕上提取一些颜色值。因此，我想做一个可以从屏幕任意位置拾取颜色值的工具，并且支持 RGB、HEX、HSL 格式，带放大镜效果。

不过呢，由于浏览器安全限制，这个网页版的 Color Picker 拾取颜色时无法跳出页面，因此我们尝试做了一个屏幕到页面的映射，但是效果不太好。因此，后面我又开发了一个浏览器插件 GetColor，这样就可以跳出浏览器页面，真正做到提取屏幕任意位置的颜色啦！

学习要点：

Screen Capture API（getDisplayMedia）
Canvas 像素操作
坐标转换和计算
触摸事件处理

GitHub 地址：https://github.com/luhuadong/color-picker

在线使用：https://luhuadong.github.io/color-picker/

③ 图片对比工具（Image Compare）

在工作和生活中，有时候我们需要同时对比几张图片同一位置的细微区别，挑选出最好的一张图片。因此我做了一个网页工具，可以同时对比 2-4 张图片，支持同步缩放、平移、移动操作。同时也支持触摸事件，因此在手机、平板等移动端也可以使用哦！

学习要点：

多图片同步操作
触摸手势识别（捏合缩放、拖拽）
响应式布局设计
事件委托和状态管理

GitHub 地址：https://github.com/luhuadong/image-compare

在线使用：https://luhuadong.github.io/image-compare/

④ 时间工具（Timestamp）

对于普通人来讲，时间戳的概念有点陌生。不过，对于软件工程师来说，时间戳是一个经常接触的东西，例如在工作中我们经常需要观察、分析带时间戳的日志信息。因此，我做了一个小工具，支持时间戳转换、多时区显示、倒计时、年度进度等时间相关功能。界面设计使用 Kindle 电纸书风格，看起来干净清爽，就像时间这位老朋友一样，历久弥新。

学习要点：