我是一名 10 多年的 Web 开发人员，我知道在不使用第三方库的情况下从事更严肃的项目会有多困难。
这就是我如此喜爱它们的原因，在本文中，我将分享我最近的一项发现。
一个我认为对论坛或 LMS（学习管理系统）等网站上的个人资料照片非常有用的宝石，尽管这个插件还有很多。
这是一个付费的 JS 插件，但有一个很好的理由。
让我们看看如何通过使用这个与大多数开发堆栈兼容的简洁图像编辑器在开发过程中节省大量时间。
什么是平图拉？
Pintura是一个图像编辑工具，包含了很多很棒的功能，我不知道从哪里开始。
事实上，本文的范围根本无法容纳此插件提供的多种可能性，因此我将尝试简要介绍主要功能并展示一些简单的示例。
简而言之，Pintura 是一个强大的 JS 图像编辑器，允许您裁剪、调整大小、旋转、应用过滤器或微调图像。
Pintura 还支持注释、贴纸（包括自定义贴纸）、从照片中删除敏感信息（例如位置）、强制裁剪比例等。
它响应迅速，适用于台式机和移动设备，非常轻巧且使用快速。
虽然您作为网站所有者可以将它用于您自己的网站或项目，但此工具非常适合开发人员。
是的，这个库是自给自足的，可以在您的网站上用作图像编辑器（例如查看这个网站），但真正的力量来自开发人员的可访问性和对各种开发平台的支持。
您应该为自己的项目尝试 Pintura 吗？
虽然我总是鼓励其他开发人员摇头并充分利用他们正在尝试构建的任何工具，但某些事情在实施时是最好的。
我的意思是，如果你想构建自己的图像编辑器工具，你可以这样做，但这可能需要几个月的时间，特别是如果你需要 Pintura 提供的 1-2 个以上的功能。
此外，您需要在不同的设备上进行测试并涵盖广泛的用例，这基本上需要一个坚实的团队和大量的时间。
但是，如果您是单人骑手怎么办？
或者，如果您的团队正在处理一个大型项目，但您希望或需要在图像处理方面做得更好？
这就是 Pintura 真正派上用场的地方。
用例池相当深，但你可以这样想：
当您的项目需要符合特定标准的照片时，Pintura 让您轻松搞定。
特定大小或比例的个人资料照片、过滤和样式化的特色图像、幻灯片、画廊或轮播的相同图像，以及可以从照片中删除所有隐私信息的网站……只是众多可能性中的一部分。
因此，尽管没有编码经验的人可以使用它，但 Pintura 在开发人员使用时显示出真正的实力。
它节省了时间并为动态图像编辑提供了一个优雅的解决方案，无论是在代码中自动还是通过允许网站用户满足特定要求或只是让他们的照片更具吸引力！
我们将在下一节介绍使用基础知识，但请记住，Pintura 可用于纯 JS、jQuery、React、Vue、Angular、Svelte 和大约 15 个其他框架。
将 Pintura 添加到您的项目中
正如已经多次提到的，Pintura 可以在许多框架中实现，但为了简单起见，我将向您展示如何使用 Pintura 输入字段。
Pintura 输入字段是 <input type=”file”> 字段的一个小包装。
换句话说，通过使用 Pintura 输入字段，您将获得 HTML 格式的文件上传按钮，但仅限于图像并包含一组强大的选项来处理图像。
准备好帐户和许可证后，只需登录仪表板并下载软件包。
单击您的许可证并下载最新版本：
解压 Pintura 存档，您将获得如下文件夹结构：
locale 文件夹包含各种语言的翻译文件，如果您需要在非英语项目中使用 Pintura，该文件夹非常有用。
packages 文件夹包含用于在各种开发堆栈中嵌入 Pintura 的包，presets 文件夹是有关如何在 20 个不同框架中使用 Pintura 的示例集合：
要找到我们要测试的示例，请打开“pintura-input”文件夹：
如您所见，此示例还包含一个“pintura-input”文件夹，其中包含一个 JS 和一个 CSS 文件，它们为 Pintura 输入字段提供动力。
我们还有一个 favicon、一个用于测试的图像以及将它们组合在一起的 index.html 文件。
启动 index.html 文件后，演示应该立即开始工作：
我们可以用 Pintura 输入字段做什么？
如上所述，Pintura 输入字段可用于您的任何图像处理需求，无论是预定义的还是基于访问者输入的。
假设我们有一个 LMS 网站，学生可以在其中注册课程并获得证书。
此类 LMS 需要学生的个人资料照片，显示在网站的各个部分以及证书中。
为了保持设计和布局的一致性，我们希望每张个人资料照片为 256×256 像素，但标准解决方案确实有一定的缺点。
你可以强迫学生在他们的电脑上自己做，然后上传正确的照片。
或者使用 CSS 动态调整照片或使用 PHP 根据需要裁剪照片。
但是，与其强迫学生进行外部工作和研究以获得最佳工具，还不必处理 CSS 带来的失真或 PHP 中奇怪的裁剪照片，您可以使用 Pintura。
对于这个例子，我们将使用来自 Unsplash 的免费图片：
照片本身很漂亮，对此毫无疑问，但对于我们的需求，有两个大问题：
- 它不是 256×256 的理想比例或尺寸
- 它实际上是 3744×5616 像素，非常大，总大小为 1.36MB。
让我们回到我们的示例，看看 Pintura 如何提供帮助：
<style> /* The empty state grey box */ pintura-input.base [data-empty] { display: flex; align-items: center; justify-content: center; background-color: #eee; } /* To make each state equal size */ pintura-input.base [data-empty], pintura-input.base img { width: 400px; height: 300px; object-fit: cover; } </style> <pintura-input class="base" src="image.jpeg" name="my_field" image-crop-aspect-ratio="4/3"> <template> <div data-empty data-drop> <p> Drag & Drop your image here or <button type="button" data-browse>Browse</button> </p> </div> <div data-load> <img src="image.jpeg" width="300" alt="" /> <div> <button type="button" data-remove>Remove</button> <button type="button" data-edit>Edit</button> </div> </div> <output data-process> <img src="{url}" width="300" alt="" /> <p role="status">"{filename}" saved</p> <div> <button type="button" data-remove>Remove</button> <button type="button" data-edit>Edit</button> </div> </output> </template> </pintura-input>
正如您在上面的代码中看到的，这部分定义了我们的 Pintura 输入字段，以及显示、更改或删除图像的选项。
为了根据我们的需要调整这个例子，我们只需要做几件事：
更改纵横比：
image-crop-aspect-ratio="4/3"
至：
image-crop-aspect-ratio="4/4"
这将确保我们的个人资料照片被裁剪为正方形，学生无需猜测正确的比例。
为了在前端正确显示图像，我们还需要更改图像 HTML 宽度属性，使其符合我们对 256×256 的需求：
<img src="image.jpeg" width="300" alt="" /> <img src="{url}" width="300" alt="" />
至：
<img src="image.jpeg" width="256" alt="" /> <img src="{url}" width="256" alt="" />
出于同样的原因，我们还想调整 CSS：
/* To make each state equal size */ pintura-input.base [data-empty], pintura-input.base img { width: 256px; height: 256px; object-fit: cover; }
最后，我们希望将输出图像的大小调整为 256×256 像素，这将为我们节省大量的服务器带宽，也使 Web 浏览器可以轻松地在我们的 LMS 的任何模板中处理图像：
<script> window.PinturaInput = { imageWriter: { targetSize: { width: 256, height: 256, }, }, }; </script>
最后，代码应如下所示：
<style> /* The empty state grey box */ pintura-input.base [data-empty] { display: flex; align-items: center; justify-content: center; background-color: #eee; } /* To make each state equal size */ pintura-input.base [data-empty], pintura-input.base img { width: 256px; height: 256px; object-fit: cover; } </style> <script> window.PinturaInput = { imageWriter: { targetSize: { width: 256, height: 256, }, }, }; </script> <pintura-input class="base" src="image.jpeg" name="my_field" image-crop-aspect-ratio="4/4"> <template> <div data-empty data-drop> <p> Drag & Drop your image here or <button type="button" data-browse>Browse</button> </p> </div> <div data-load> <img src="image.jpeg" width="256" alt="" /> <div> <button type="button" data-remove>Remove</button> <button type="button" data-edit>Edit</button> </div> </div> <output data-process> <img src="{url}" width="256" alt="" /> <p role="status">"{filename}" saved</p> <div> <button type="button" data-remove>Remove</button> <button type="button" data-edit>Edit</button> </div> </output> </template> </pintura-input>
那并不难，不是吗？现在让我们看看我们是否正确组装了所有东西。
让我们转到 Pintura 输入基础模板部分并通过单击删除按钮删除照片：
这将删除默认图像并允许我们上传我们想要的任何图像：
只需单击浏览按钮并选择个人资料照片，或者只需将其拖放即可。
这将触发 Pintura 界面，并允许学生调整他们的照片：
如您所见，裁剪板被锁定为 4×4 的比例，所以我们需要做的就是稍微移动它以获得所需的图像部分：
为了展示更多功能，让我们对照片应用一些过滤器：
请记住，可以应用许多过滤器和调整，但如果您想非常具体地了解此个人资料照片的可用更改类型，也可以禁用。
就是这样。完成后，单击右上角的黄色“完成”按钮，您的新照片就准备好了：
这太棒了！
只需几行代码调整，我们就可以让我们的学生以一种简洁的方式上传他们的个人资料照片。
此外，我们轻松地执行了所需的规则，使得在我们的系统中使用该图像变得轻而易举。
我们在浏览时节省了大量带宽和处理能力！
虽然原始图像为 3744×5616 像素和 1.36MB，但生成的图像具有所需的 256×256 分辨率，大小仅为 20KB。
关于平图拉的最后想法
虽然Pintura编辑器非常易于使用和实施，但它包含一组强大的功能。
将它与漂亮的 GUI 和对大多数环境的支持相结合，我们可以说这是一个节省大量时间的 UI 资产，可以让您的项目大放异彩。
可能的限制和上传者自由的结合使得机会相当无限。
虽然有些人可能会认为该工具主要针对处理画廊和类似媒体的项目，但该工具实际上可以极大地改进任何需要上传照片的项目，并且还使开发人员的图像处理更容易。
我强烈鼓励你测试一下，相信你会像我一样坠入爱河。
由 Stefan Ristic 撰写
原文： https://tympanus.net/codrops/2022/10/03/effortless-javascript-image-editing-with-pintura/