使用Paste.js将屏幕截图粘贴到文本区域中，但是您将如何将其传输到Rails

Paste screenshot into a textarea using Paste.js, but how would you transmit it to Rails?

本文关键字：Rails 传输 区域 屏幕截图 js Paste 使用 文本      更新时间：2023-09-26

我正在研究一种解决方案，该解决方案允许将屏幕截图直接粘贴到Rails的文本区域中，稍后将解析为Markdown。

我找到了整洁的 Paste.js 库，它可以捕获剪贴板，检测是粘贴字符串还是图像，然后通过将图像转换为 Base64 字符串来对图像做出反应，然后可以用作图像。

照原样，Paste.js提供了简单地将简单的图像标签粘贴到文本区域中所需的一切，如下所示：

![Some alt text](data:image/png;base64,iVBORw0KGgoAA...SUVORK5CYII=)

但这会使整个文本区域变得混乱，Base64 字符串可能会变得非常非常长。所以我只想插入一个占位符，如下所示：

![Some alt text](blob:3857c1cf-1a68-4549-bc0d-aa18af25bb82)

然后，在隐藏的输入字段中，我想发送 Base64 数据：

<input type="hidden" name="post[content][screenshots][3857c1cf-1a68-4549-bc0d-aa18af25bb82]" value="data:image/png;base64,iVBORw0KGgoAA...SUVORK5CYII=" />

我现在的问题是：你将如何在 Rails 的服务器端实现这一点？我只想将它们保存为uploads下的常规文件，我还在其中存储来自 Carrierwave 的上传。

我

不希望它们在粘贴时自动上传，因为用户可以在创建或编辑帖子时取消，并且我不希望上传空间被未使用的图像弄乱。

另外，我不希望图像（保存后）再次从服务器中删除，例如，从博客文章中删除引用时，因为博客文章是版本控制的（使用 PaperTrail），并且引用将始终存在于旧版本中，所以我认为保留旧图像也是明智的。

你认为这有意义吗？还是我错过了什么？是否有我没有看到的限制（例如，长 Base64 字符串的上传限制）？

也许还有其他图书馆也在做同样的事情吗？我知道 GitHub Issues 支持此功能，但我无法找到他们是如何做到的，他们也不允许在 Firefox 中粘贴屏幕截图（Paste.js 支持此功能）。

我对我的博客有这个确切的要求。感谢您的粘贴提示.js;我实现了它并写了一篇文章。

我使用以下方法来实现它。

  • 用户将图像粘贴到文本区域中
  • 粘贴.js捕获 base64/png 数据
  • Ajax 此有效负载到服务器
  • 服务器转换为 jpeg
  • 将其保存在服务器上
  • 返回指向前端的降价链接
  • 将降价链接附加到文本区域的内容

我想更改最后一点，以便它可以记住用户光标的位置并将其插入其中，而不是将其附加到末尾。

相关文章：