使用Paste.js将屏幕截图粘贴到textarea中,但是如何将其传输到Rails?

时间:2015-06-19 08:04:26

标签: javascript ruby-on-rails file-upload screenshot copy-paste

我正在研究一种解决方案,该解决方案允许将屏幕截图直接粘贴到Rails中的textarea中,后者将被解析为Markdown。

我找到了整齐的Paste.js库,它捕获剪贴板,检测是否粘贴了字符串或图像,然后通过将它们转换为Base64字符串对图像作出反应,然后将其用作图像。< / p>

就像它一样,Paste.js提供了简单的图像标签粘贴到textarea所需的一切,如下所示:

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

但这会使整个textarea混乱,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支持)。

2 个答案:

答案 0 :(得分:0)

我对我的博客有这个确切的要求。感谢paste.js的提示;我实现了它并写了write up

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

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

我想改变最后一点,以便记住用户光标的位置并将其插入那里,而不是将其附加到最后。

答案 1 :(得分:0)

我同时使用Paste.js和carrierwave-base64 gem实现了这一点。

我将尽快在此处添加详细答案,但目前我的项目https://github.com/jmuheim/base应该提供所有必需的信息。