画像添付できないWebサービスに画像を添付したいときに、画像を文字列（Base64）にしてURLに含めることで共有を可能とする。

サンプル

画像をBase64で共有サンプル

生URLを確認する（※ 長文注意）

https://tksugimoto.github.io/note/share-images-with-base64/#data:image/png;base64,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

↑で共有している元画像画像

仕組み

画像をBase64に変換

data:image/png;base64,iVBORw0KGgoAAAANSUh（以下略）

Base64文字列をURLのhash部分にセット

https://tksugimoto.github.io/note/share-images-with-base64/#data:image/png;base64,iVBORw0KGgoAAAANSUh（以下略）

ページ表示時にURLのhash部分が存在したら画像を表示

注意事項

画像サイズに比例してURLが長くなるので、文字数制限のあるWebサービスでは使えない可能性がある
画像サイズが大き過ぎるとhashにセットできずに、URLが about:blank になる