はじめに

先日、コーポレートサイトにYoutubeのコメント欄からWord Cloudを作成するDemo Appを公開しました。

その際、APIからバイナリデータ（starlette.responses.StreamingResponse型）として画像を受け取り、Wordpress上で表示する際に苦労しましたので、備忘録として記事にします。

APIにリクエストする際の注意点

APIの仕様はこんなかんじ

param

{"URL" :"https://www.youtube.com/watch?v=xxxxxxxxx"}

response

starlette.responses.StreamingResponse

postman

バイナリーデータなので文字化けしてても変ではないと思いこんでいましたが、
responseTypeに arraybuffer を追加する必要がありました。
※APIリクエストはaxiosを利用しています。

var instance = axios.create({
    'responseType': 'arraybuffer',
    'headers': {
        'Content-Type': 'image/png'
    }
});

バイナリーデータから画像として表示するまで

instance.post('https://api.com', {
    URL: url
}).then((res) => {
    const imgData = res.data
    var bytes = new Uint8Array(imgData);
    var binaryData = "";
    for (var i = 0, len = bytes.byteLength; i < len; i++) {
        binaryData += String.fromCharCode(bytes[i]);
    }
    var img = document.getElementById("imgTest");
        img.src = "data:image/png;base64," + window.btoa(binaryData);
    });

こちらはいろいろなやり方があるのですが、今回は windo.btoa() を使用しました。
参考URL : AjaxでバイナリのJPEG画像データを受け取って表示する

無事画像が表示されるようになりました。

Youtubeのコメント欄からWord Cloudを作成するDemo App