【解決】Bubbleで重ね合わせた要素を単一画像として抽出する方法

重なり合った要素(透過画像、テキスト、アイコン)を一枚の画像データとして抽出する方法を模索しています。Canva などのダウンロード機能を想定しています。

Groupエレメントを使用して透過画像の上にテキストやアイコンを重ねることはできますが、これらを単一の画像ファイルとして保存または出力する方法がわかりません。

以下の点について、皆様のアドバイスやアイデアをいただけますと幸いです:

● Bubbleの標準機能で、重なり合った要素を一枚の画像として保存する方法はありますか?
● 外部APIを利用する場合、おすすめのサービスや統合方法はありますか?
● この機能を実現するのに適したBubbleプラグインはありますか?
● その他、この機能を実現するための創造的なアプローチがあれば…

Perproxity, GPT-4o で下調べしました。

期待とあっているかわかりませんが、javascriptを使えばグループ内に配置した画像+テキストをjpgとしてダウンロードすることは出来ました。

以下のやり方で実装しました。
(1)ページのHTML要素で以下を読み込み

(2)
画像やテキストが入ったGroupにIDを設定。今回はmyElementとしています。

(3)
ダウンロードボタン押下時にrunjavascriptのアクションを実行
javascript配下としています。

html2canvas(document.getElementById("myElement"), {
  useCORS: true,
  // crossOrigin: 'anonymous', // 必要に応じて
}).then(function(canvas) {
  const imageData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = imageData;
  link.download = 'myImage.png';
  link.click();
});

「いいね!」 2

Ikejapa さん、ありがとうございます :flushed:
すごすぎます。javascript コード挿入は盲点でした。
写真有りで非常に見やすいです!コードも助かりすぎます:smiling_face_with_tear:

「いいね!」 2