使用Paste.js將屏幕截圖粘貼到textarea中，但是如何將其傳輸到Rails？

Question

我正在研究一種允許將屏幕截圖直接粘貼到Rails的文本區域中的解決方案，稍后將其解析為Markdown。

我發現整潔的Paste.js庫可以捕獲剪貼板，檢測是否粘貼了字符串或圖像，然后通過將圖像轉換為Base64字符串（然后可以用作圖像）對圖像作出反應。

照原樣，Paste.js提供了將簡單的圖像標簽粘貼到textarea所需的一切，如下所示：

![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支持）。

Answer 1

我的博客對此有確切要求。 感謝您提供paste.js的技巧； 我實現了它並寫了一篇文章 。

我使用以下方法來實現它。

• 用戶將圖像粘貼到文本區域
• Paste.js捕獲base64 / png數據
• Ajax將此有效負載發送到服務器
• 服務器轉換為jpeg
• 將其保存在服務器上
• 將降價鏈接返回到前端
• 將markdown鏈接附加到文本區域的內容

我想更改最后一點，以便它可以記住用戶光標的位置並將其插入其中，而不是將其附加到末尾。

Answer 2

同時，我使用Paste.js和carrierwave-base64 gem實現了這一點。

我將在這里很快添加一個詳細的答案，但是就目前而言，我的項目https://github.com/jmuheim/base應該提供所有需要的信息。