将截图上传,通过简单的设置,就可以快速的将屏幕截图变得更漂亮。
源码: https://github.com/rishimohan/pika
同类工具:
Pika 是一款网络应用程序,可将 RAW 屏幕截图转换为精美的图像,您会很自豪地在登录页面、电子邮件、Twitter 或营销页面上分享这些图像。
Pika 背后的主要目标是加快设计截图的过程。
皮卡如何工作?
Pika 用于dom-to-image
从 DOM 元素生成图像。DOM 元素是带有您的屏幕截图和所有样式的画布。样式是使用内联 CSS 和 Tailwind CSS 混合完成的。
Pika 如何快速设计截图?
- Pika 将您的选项保存在本地机器上,因此当您下次打开应用程序时,它会保留您之前的设置
- Pika 为您提供快捷方式:
- Ctrl/Cmd+V:粘贴截图
- Ctrl/Cmd+C:复制输出图像
- Ctrl/Cmd+S:保存输出图像
你可以用 Pika 做什么?
- 将圆角应用于您的屏幕截图
- 应用背景渐变
- 控制画布中的屏幕截图位置,添加填充
- 为屏幕截图添加阴影
- 在背景中添加噪音以添加 RAW 氛围
设置应用程序
首先,运行开发服务器:
- 克隆仓库
- 设置
yarn
- 运行开发服务器
yarn dev
- 使用浏览器打开http://localhost:3000以查看结果。
- 位于的文件
/components/main
包含画布和样式的代码
使用
- Next.js
- TailwindCSS