Djangoでダウンロードした画像をbase64でエンコード出力

CORSの関係で他所にある画像をそのままでは表示出来ない

これは普通に権利の問題などもあり、勝手にやって良いことでもないので、それぞれのサイトのポリシーに則ってやって欲しいことなのですが、今回試したこととしては、Instagramの画像を外部から表示しようとしたところCORSエラーに引っかかったのでした。

これを解決しようとしたところ、一度画像を読んで、base64に変換したものを表示してやれば良いのでは？と思い、Djangoではどうやれば良いか分かったので、その解決方法を書いておきたいと思います。

画像データの読み込みとbase64エンコード

コード自体はとても簡単で、requestsでデータを読み、base64でエンコードしたものをHttpResponseで返すといったことをするだけで済みました。

import requests
import base64
from django.http import HttpResponse

def get_image(url):
    content = requests.get(url).content
    encoded_content = base64.b64encode(content)
    return HttpResponse(encoded_content, content_type='image/jpg')

base64でエンコードされたデータをtemplate側で表示

私の場合は、上記の読み込み部分をAPIにしてしまい、画像の読み込み自体はjsに任せるようにしました。
imgはdata:image/jpeg;base64,を前に付けるとデータを読み込み、画像として表示してくれるので、js側でAPIを呼び、imgタグに入れるというようにすれば、Instagramの画像も無事表示されました。

<img src="data:image/jpeg;base64,' + data + '">

最後に

普段、base64を使うことはあまりないので、ちょっと躓きましたが、分かってしまうと簡単ですし、今後も実用性もあるのではないかと思いました。