実装したい機能
noteの様に画像とテキストを投稿しており、Rich Text Editorを利用しています。
追加した画像の容量が大きいと容量を圧迫して困る＆表示に時間がかかるので、
何らかの方法でサイズを圧縮したいと思っています。
なにかやり方はありますでしょうか？教えてください。
このタイプのRich Text Editor
試したこと
画像のURLを正規表現で取得し、pngのURLに対してImage Compressionを使おうとしました。
圧縮指示＆正規表現１つ目(=ログのTEST1)
正規表現２つ目(=ログのTEST2)
→実際に取れたURLは以下の画像の"TEST2"の値
画像のURLは取れており、参照は可能。
しかし、「「https://easivice.bubbleapps.io」から「https://s3.amazonaws.com/appforest_uf/f1663966859861x351902846044619840/richtext_content.png」でフェッチするためのアクセスは、CORS ポリシーによってブロックされています」というエラーが発生し、圧縮できませんでした。
→圧縮できたら、Rich Text EditorのIMGのURLを書き換えようとしていました。
補足情報
目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。
また、例えば「PictureUploaderでアップロードした画像をRich Text Editorの末尾に追加」ができるのでしたら、その方法でも圧縮を挟めるので解決できます。
何か案があれば試してみるので、教えてください！
「いいね！」 3
Rich Text Editorの一機能をカスタマイズする、と同義とすると難しいかなと感じました。
＞目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。
そもそもRich Text Editorの画像アップロードって、サイズいじれませんか？
選択すると四隅に小さな四角が出てくるおなじみのやり方で。
返信ありがとうございます。
サイズいじれますよ！
ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます
今考えている案は、
imagexかCroppieで画像サイズを自動調整するか、
保存後に保存された画像を編集するか、
画像のアップロードボタンはリッチテキストの外につけるか(このFAQのように)で考えています。
上手くいったら、共有します！
「いいね！」 3
＞サイズいじれますよ！
＞ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます
確かに、ユーザーは気にせず使いますもんね。。
＞画像のアップロードボタンはリッチテキストの外につけるか
このやり方、一番可能性がありそうだと感じました！
またご共有いただけたら嬉しいです、ふぁいとです
「いいね！」 1
標準機能ではできない＆プラグインの開発が必要な前提ですが、以下の方法で実現できます。
- ユーザーが保存完了時にバックエンドワークフローを起動
- バックエンドワークフローで、保存されたリッチテキストデータから画像URLを取得（正規表現で抽出）
- 抽出したURLをバックエンドで圧縮し、BubbleS3に再UP
- 2と3で処理したURLペアを元にリッチテキストデータのURLを置換
- 置換後、元データを削除
問題はPluginの開発部分ですが、BubbleのPluginEditorではメモリが少ないので、数MBまではギリギリ処理できます。
が、それを超えた量となる場合は別途APIを作成してAPI Connectorで接続するほうが柔軟に使用できておすすめです。
「いいね！」 4
知見の提供ありがとうございます！
プラグインの開発も連携させるのですね。
対応方法の幅が広がりました。
メモリに関する情報も大変助かります。
「いいね！」 1
