リッチテキストで入力した画像を圧縮する方法

bubble
1

実装したい機能

noteの様に画像とテキストを投稿しており、Rich Text Editorを利用しています。
追加した画像の容量が大きいと容量を圧迫して困る＆表示に時間がかかるので、
何らかの方法でサイズを圧縮したいと思っています。
なにかやり方はありますでしょうか？教えてください。

このタイプのRich Text Editor

image
image747×202 38.7 KB

試したこと

画像のURLを正規表現で取得し、pngのURLに対してImage Compressionを使おうとしました。
圧縮指示＆正規表現１つ目(=ログのTEST1)

image
image858×758 52.6 KB

正規表現２つ目(=ログのTEST2)
image

→実際に取れたURLは以下の画像の"TEST2"の値
画像のURLは取れており、参照は可能。

しかし、「「https://easivice.bubbleapps.io」から「https://s3.amazonaws.com/appforest_uf/f1663966859861x351902846044619840/richtext_content.png」でフェッチするためのアクセスは、CORS ポリシーによってブロックされています」というエラーが発生し、圧縮できませんでした。
image

→圧縮できたら、Rich Text EditorのIMGのURLを書き換えようとしていました。

補足情報

目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。
また、例えば「PictureUploaderでアップロードした画像をRich Text Editorの末尾に追加」ができるのでしたら、その方法でも圧縮を挟めるので解決できます。

何か案があれば試してみるので、教えてください！

「いいね！」 3
2

Rich Text Editorの一機能をカスタマイズする、と同義とすると難しいかなと感じました。

＞目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。

そもそもRich Text Editorの画像アップロードって、サイズいじれませんか？
選択すると四隅に小さな四角が出てくるおなじみのやり方で。

3

返信ありがとうございます。

サイズいじれますよ！
ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます:sweat_drops:

今考えている案は、
imagexかCroppieで画像サイズを自動調整するか、
保存後に保存された画像を編集するか、
画像のアップロードボタンはリッチテキストの外につけるか(このFAQのように)で考えています。

上手くいったら、共有します！

「いいね！」 3
4

＞サイズいじれますよ！
＞ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます:sweat_drops:

確かに、ユーザーは気にせず使いますもんね。。

＞画像のアップロードボタンはリッチテキストの外につけるか

このやり方、一番可能性がありそうだと感じました！

またご共有いただけたら嬉しいです、ふぁいとです:tea:

「いいね！」 1
5

標準機能ではできない＆プラグインの開発が必要な前提ですが、以下の方法で実現できます。

  1. ユーザーが保存完了時にバックエンドワークフローを起動
  2. バックエンドワークフローで、保存されたリッチテキストデータから画像URLを取得（正規表現で抽出）
  3. 抽出したURLをバックエンドで圧縮し、BubbleS3に再UP
  4. 2と3で処理したURLペアを元にリッチテキストデータのURLを置換
  5. 置換後、元データを削除

問題はPluginの開発部分ですが、BubbleのPluginEditorではメモリが少ないので、数MBまではギリギリ処理できます。
が、それを超えた量となる場合は別途APIを作成してAPI Connectorで接続するほうが柔軟に使用できておすすめです。

「いいね！」 4
6

知見の提供ありがとうございます！
プラグインの開発も連携させるのですね。
対応方法の幅が広がりました。
メモリに関する情報も大変助かります。

「いいね！」 1