1. 概要

この短い記事では、画像をBase64に変換する方法を説明します。 その目的のために、ほとんどのLinuxディストリビューションで利用可能なbase64ツールを使用します。

2. 画像をBase64に変換する

場合によっては、テキストデータのみを処理するメディアを介して転送するためにバイナリデータをエンコードする必要があります。 Linuxでは、 base64 ユーティリティにアクセスできます。このユーティリティは、ファイルをエンコードおよびデコードして、標準出力に表示できます。 それはかなり最小限で使いやすいです。

base64 パッケージには、ほとんどのLinuxディストリビューションにインストールされている GNUCoreutilsが付属しています。 次のコマンドを発行するだけで、ターミナルで確認できます。

$ base64 --version
base64 (GNU coreutils) 8.32
Copyright (C) 2020 Free Software Foundation, Inc.

2.1. base64ユーティリティの使用

base64の構文は単純です。 コマンドbase64を実行し、続いてオプションとファイルを実行します。

$ base64 [OPTIONS]... [FILE]

画像をBase64に変換し、結果を標準出力に表示してみましょう。

$ base64 ~/Pictures/book.jpg
/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEhUQEA8VFRUQEBUPFRUVFQ8VFRUVFRUWFhUV
FRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFxAQGCsiHyUtLS0rLy0rLSst
LS0tLS0rLS0rLSsrLTUrLS0tLS0wLSstLSstLS0rLSstLSstKystK//AABEIAMIBAwMBIgACEQED
EQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAQIDBAUHBgj/xABHEAACAQICBQcICAQFAwUAAAAAAQID
...

エンコードされたデータが標準出力に出力されることがわかります。 もちろん、ファイルサイズによっては、出力が長くなります。 わかりやすくするために、残りの行は省略されています。

さらに、出力列を制限するために使用できるオプション –wrapまたは-wがあります。 たとえば、線の幅を56に制限する必要がある場合は、それを –wrapオプションに渡すことができます。

$ base64 --wrap 56 ~/Pictures/book.jpg
/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEhUQEA8VFRUQEBUP
FRUVFQ8VFRUVFRUWFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMt
...

一方、引数として 0 を渡すと、1行の長いBase64文字列になります。

2.2. HTML用の画像のエンコード

img 要素を作成し、その中にBase64データを埋め込むためのシェルスクリプトを作成できます。 画像形式を自動的に検出し、MIMEタイプとして使用する必要があります。 画像ファイルを提供し、img要素を標準出力に出力する必要があります。

#!/bin/bash

usage() {
  echo "Usage: ./base64img [FILE]"
  echo "Formats: APNG BMP GIF JPEG PNG WEBP"
}

# Print usage and exit if the file was not provided
[ $# -eq 0 ] && usage && exit 1

# Grab the image format
fmt=$(file "$1" | grep -iEo 'apng|bmp|gif|jpeg|png|webp' | head -n1 | tr '[:upper:]' '[:lower:]')

# Check if the image format is supported
[ -z "$fmt" ] && usage && exit 1

# Create an IMG template
img="<img src='data:image/"$fmt";base64, $(base64 -w 0 "$1")' />"

echo "$img"

まず、エラーが発生した場合の使用関数を記述します。 次に、 file コマンドを使用して画像形式を取得し、小文字に変換します。 その後、サポートされていない形式の場合、変数が空になるため、それが空の変数であるかどうかを確認します。 最後に、テンプレートを作成し、それを標準出力に出力します。

それをテストしてみましょう:

$ ./base64img.sh ~/Pictures/block.png
<img src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+mSotULNhBxCFDddGCqIijVqEIFUKt0KqDyaV/0KQhaXFxFFwLDv4sVh1cnHV1cBUEwR8QNzcnRRcp8buk0CLGO457eO97X+6+A4RGmWlW1zig6VUzlYiLmeyqGHhFEGGaowjLzDLmJCkJz/F1Dx/f72I8y7vuz9Gr5iwG+ETiWWaYVeIN4unNqsF5nzjCirJKfE48ZtIFiR+5rrj8xrngsMAzI2Y6NU8cIRYLHax0MCuaGvEUcVTVdMoXMi6rnLc4a+Uaa92TvzCU01eWuU5rCAksYgkSRCiooYQyqojRrpNiIUXncQ//oOOXyKWQqwRGjgVUoEF2/OB/8Lu3Vn5ywk0KxYHuF9v+GAYCu0Czbtvfx7bdPAH8z8CV3vZXGsDMJ+n1thY9Avq2gYvrtqbsAZc7wMCTIZuyI/lpCfk88H5G35QF+m+BnjW3b61znD4AaepV8gY4OARGCpS97vHuYGff/q1p9e8HZDNyobFmBakAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAUSURBVAjXY3SufccAA0wMSAA3BwBUVQG2LRn5IQAAAABJRU5ErkJggg==' />

2.3. Base64コンテンツをクリップボードにコピーする

ターミナルウィンドウからテキストを正確にコピーすることが難しい場合があります。 したがって、出力をテキストファイルに保存するか、システムクリップボードにコピーすることができます。 幸い、Linuxでは、 xclipというツールを使用して、システムクリップボードにアクセスできます。

xclip パッケージは一部のLinuxディストリビューションにインストールされていませんが、yumまたはaptを使用して公式リポジトリからインストールできます。 インストールすると、次のスニペットに示すように使用できます。

$ xclip -selection clipboard file.txt

上記のコマンドを分解してみましょう。

  • -selection オプションは、コンテンツをコピーする場所を指定します
  • clipboard 引数は、コンテンツをシステムクリップボードにコピーすることを指定します
  • 最後の引数は、コピー元のファイルです

私たちの場合には、 Base64のコンテンツを標準出力からコピーします。 したがって、base64出力をにパイプします xclip

$ base64 ~Pictures/block.png | xclip -selection clipboard

これにより、Base64データがクリップボードに効果的にコピーされ、貼り付ける準備が整います。

3. 結論

この記事では、base64ツールを使用して画像をエンコードする方法を学びました。 また、Base64データからHTML imgタグを作成するための小さなシェルスクリプトも作成しました。

最後に、 xclip を使用して、Base64データを端末からクリップボードにコピーする方法を学びました。