# Base64から画像デコードの方法
**URL:** https://www.nocode-faq.com/t/topic/3672
**Category:** bubble
**Created:** [2023 年 6 月 9 日午後 4:28 UTC](https://www.nocode-faq.com/t/topic/3672 "2023-06-09T16:28:43Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 9 日午後 4:28 UTC](https://www.nocode-faq.com/t/topic/3672/1 "2023-06-09T16:28:43Z")
Base64の文字列を画像にデコードをしたいのですが
実装方法をご存知の方ご教示頂きたいです。
下記のサイトの様なことをBubbleのワークフロー上で実施したいです。
> **[Base64→画像デコード：Base64を画像に変換 | ラッコツールズ🔧](https://rakko.tools/tools/71/)**
>
> Base64文字列を画像にデコードします。
こちらでご紹介されているプラグインでは、画像変換はできなかったと思うのですが、
やり方の問題でしょうか。
> [@SendGridの添付ファイルの変換（base64）について](https://www.nocode-faq.com/t/topic/3476/2):
>
> Bubbleフォーラムに同じような質問があったので共有します。 無料プラグイン 有料プラグイン
お手数をおかけしますが、宜しくお願い致します。
---
### Author:  [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)
#### Post date: [2023 年 6 月 10 日午後 1:08 UTC](https://www.nocode-faq.com/t/topic/3672/2 "2023-06-10T13:08:02Z")
こんばんは、
ちょっと試したところ、こちらのbase64というプラグインを使って
デコードできました
①準備プラグインを入れる
こちらのbase64というプラグインをいれる
②確認用
■変換用後の保存先用にcustom stateを準備
画像をbase64化した化したテキストを保存するcustom state：encode-test (text型)
デコードした画像ファイルを保存するcustom state：image-test (image型)
■画像アップアップロード用に
・Picture uploadを貼る
・画像をbase64化したテキストを表示するtextを貼る（custom stateのencode-testの値を表示するように設定）
・デコードした画像を表示するimageをはる（custom stateのimage-testの値を表示するように設定）
③ワークフローで 画像をbase64のテキストにencode
④ワークフローでbase64のテキストを画像にdecode
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 11 日午前 9:22 UTC](https://www.nocode-faq.com/t/topic/3672/3 "2023-06-11T09:22:03Z")
ご返信ありがとうございます！
ご教示頂いた形の事は出来ましたが
私が受け取っているBase64のテキストを画像に変換することは出来ませんでした・・・
（紹介いただいたpluginで画像からエンコードして、さらに同じプラグインでデコードした際は、同じ画像は出力できました。）
私が受け取っているBase64テキストは非常に長く、Pluginでエンコードしたのよりもかなり長いです。これが良くないのでしょうか。
私のBase64のテキストは、下記で画像をエンコードした形と似ておりまして
> **[画像→Base64エンコード：画像をBase64に変換 | ラッコツールズ🔧](https://rakko.tools/tools/72/)**
>
> 画像をBase64文字列にエンコードします。
恐らくこのテキストがデコードできれば、画像出力できると思うのですが・・・
(実際に出力したいBase64のTextをお見せしたいのですが、ここでは長すぎて共有できなくDiscordとかでしたら可能でしょうか)
お手数をおかけし恐縮ですが、ご確認ご教示頂けますと幸いです。
---
### Author:  [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)
#### Post date: [2023 年 6 月 11 日午前 10:07 UTC](https://www.nocode-faq.com/t/topic/3672/4 "2023-06-11T10:07:14Z")
こんばんわ
今回の質問の背景を教えていただけますか。
・何を実現しようとしていますか。
・そのうえで、どうしてbase64を利用しようとしていますか。
サイズの大きなデータを使おうとしているのであれば、
base64を使う以外の解決策の方がよいのではないかと考えています。
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 11 日午前 11:35 UTC](https://www.nocode-faq.com/t/topic/3672/5 "2023-06-11T11:35:50Z")
Stable Diffusion（SD） というAI画像生成のAPIと繋いでいます。
APIでSDから画像データを受け取るのですが
それがBase64のデータとして受け取りになっているので、それをどうにかBubble上で通常のファイル(png)に変換・表示させたいと思っております。
他に必要情報があればご教示頂けますと幸いです。
宜しくお願い致します。
---
### Author:  [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)
#### Post date: [2023 年 6 月 11 日午後 12:00 UTC](https://www.nocode-faq.com/t/topic/3672/6 "2023-06-11T12:00:15Z")
返信ありがとうございます。
「Stable Diffusion [bubble.io](http://bubble.io)」でGoogle検索したところ
次の動画がでてきました。
ざっと流して見たところ、この動画のやり方できそうなので試してみてもらえますか。
[ ](https://www.youtube.com/watch?v=3-XdeZWtESE)
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 11 日午後 1:01 UTC](https://www.nocode-faq.com/t/topic/3672/7 "2023-06-11T13:01:15Z")
検索ありがとうございます。
以前、まさにその動画でAPIと接続していたんですが
そのAPIでは画像生成の質が良くなかった為、使うのを辞めた経緯がありまして。。。
今は、下記をgoogle colaboratoryで起動して接続を試みています。
> **[GitHub - TheLastBen/fast-stable-diffusion: fast-stable-diffusion + DreamBooth](https://github.com/TheLastBen/fast-stable-diffusion)**
>
> fast-stable-diffusion + DreamBooth. Contribute to TheLastBen/fast-stable-diffusion development by creating an account on GitHub.
接続自体ははできたのですが、画像データがBase64で出てくるで困っているという状況なんです。
---
### Author:  [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)
#### Post date: [2023 年 6 月 12 日午前 1:00 UTC](https://www.nocode-faq.com/t/topic/3672/8 "2023-06-12T01:00:14Z")
一旦、状況の切り分けをした方がいいと思います。
Stable Diffusionから出力されえるbase64のデータが本当にbase64のデータなのか、
壊れていないのかが気になります。
■確認事項
そのデータをbubble.ioを使わないで画像に変換する処理があれば、
変換して意図した画像が出るか確認してもらえますか。
例えば、貼ってくれていたリンクの先にある
[Base64→画像デコード](https://rakko.tools/tools/71/)で変換してもらうとか
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 12 日午前 1:14 UTC](https://www.nocode-faq.com/t/topic/3672/9 "2023-06-12T01:14:40Z")
受け取っているデータを下記に入れても上手く表示されています！
> **[Base64→画像デコード：Base64を画像に変換 | ラッコツールズ🔧](https://rakko.tools/tools/71/)**
>
> Base64文字列を画像にデコードします。
なので、コードが壊れてはいないと思いました。
---
### Author:  [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)
#### Post date: [2023 年 6 月 12 日午前 4:54 UTC](https://www.nocode-faq.com/t/topic/3672/10 "2023-06-12T04:54:23Z")
> 私が受け取っているBase64テキストは非常に長く、Pluginでエンコードしたのよりもかなり長いです。これが良くないのでしょうか。
→ こちらの可能性はあります。
Stable Diffusion（？）から出力されれるbase64のテキストと
bubble.io側で変換する部分で、どこかがかみ合っていないのだと思います。
なので、処理を一つ一つ確認していってもらう感じになるかと思います。
後は次のいづれかで対応するか。。
パターン１）こちらがおすすめですね。。
google colaboratory側でbase64のをファイルに変換してから
bubble.ioに渡してはどうですか。
パターン２）おすすめしないですが。。
base64のテキストをそのままhtmlのimgタグに設定して表示する
関連リンク：
> **[画像やPDFをBase64エンコード（変換）してHTMLに埋め込んでサイトの表示速度を速くする | Free Style](https://blanche-toile.com/tools/image-to-base64)**
>
> Googleの検索エンジンでWebページの表示速度が速いと、ユーザーにストレスを与えないので検索順位が上がるなどいろいろ言われている中で、表示速度を速くする方法の1つとしてHTTPリクエストを減らすという方法があります。今回は、画像やPDFをBase64エンコードしてHTMLに埋め込んで表示速度を速くする方法をご紹介。
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 6 月 12 日午前 5:54 UTC](https://www.nocode-faq.com/t/topic/3672/11 "2023-06-12T05:54:02Z")
ありがとうございます。確認してみたいと思います。
---
### Author:  [@nakamu.tai.11](https://www.nocode-faq.com/u/nakamu.tai.11)
#### Post date: [2023 年 10 月 5 日午後 2:52 UTC](https://www.nocode-faq.com/t/topic/3672/12 "2023-10-05T14:52:32Z")
Base64の文字列を画像にデコード方法
以前、ご質問させて頂いた内容ですが
こちらのプラグインで解決することができました。
---
### Author:  [@tsubasa](https://www.nocode-faq.com/u/tsubasa)
#### Post date: [2023 年 10 月 6 日午前 12:54 UTC](https://www.nocode-faq.com/t/topic/3672/13 "2023-10-06T00:54:17Z")
報告ありがとうございます！！