在前端开发中，我们经常需要使用图像编辑工具来设计和处理图片，比如设计师的设计稿，或者是网站中的各种图片。但是有些工具比较昂贵，或者是操作门槛较高，让人望而却步。今天我们介绍一款开源的图片编辑工具：lunacy 其使用 npm 包进行安装和使用。
简介
lunacy 是一款 Sketch 文件查看器和编辑器，它的最大特点就是免费开源，且支持多平台，可运行于 Windows 和 MacOS 系统。该工具支持多种文件格式，包括 Sketch, Adobe XD, PSD, JPG, PNG 和 SVG 等常见格式。借助它可以快速地查看、编辑和导出这些文件。
安装
想要使用 lunacy，我们首先需要安装它。在命令行窗口中输入以下命令：
npm install -g lunacy
使用
安装完毕后，我们可以在命令行窗口中输入 lunacy 命令来启动它。启动后，我们就可以看到 lunacy 的主界面了。这里我们以打开一个 Sketch 文件为例，来演示如何在 lunacy 中进行编辑。
打开 Sketch 文件
在 lunacy 的主界面中，我们可以看到一个文件夹图标，点击它可以打开本地文件，选择要打开的 Sketch 文件后，我们就可以在界面中看到该文件的设计稿了。
编辑设计稿
在界面左侧是工具栏，可以选择不同的工具进行编辑，比如矩形、圆形、文本等。选择相应的工具后，我们就可以在设计稿中进行编辑了。
在工具栏中选择“箭头”工具，我们可以直接在设计稿中选择之前画的图形进行编辑：
/* 选择矩形并进行编辑 */
const rect = document.getElementById('rect')
rect.style.fill = 'blue'
rect.setAttribute('x', 100)
rect.setAttribute('y', 100)
rect.setAttribute('width', 200)
rect.setAttribute('height', 100)导出文件
编辑完成后，我们可以将文件导出成多种格式，如 PNG、JPG、SVG 等。在 lunacy 中，只需要点击顶部菜单栏的“导出”按钮，在弹出的对话框中选择要导出的文件格式，输入文件名后，就可以完成导出了。
结语
通过本文，我们了解了如何使用 npm 包 lunacy 进行图像编辑。虽然使用该工具需要一定的学习成本，但是它免费且支持多平台，可以帮助我们快速地查看、编辑和导出图像文件，帮助开发者更轻松地完成图片相关的工作。如果你目前还没有找到一款适合自己的图片编辑工具，不妨尝试一下 lunacy。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66fae