イメージとBase64の相互変換

1. C#

◎ イメージ(StreamAssets) → Base64
猫の画像ファイルを「Assets/Resources」に「cat.bytes」の名前で配置しています。 JavaScriptにBase64を渡すときは、先頭に「data:image/jpeg;base64,」を付加しないと、「URI Too Long」のエラーがでる場合があります。

// イメージ(Resources) → byte配列
public byte[] ImageToBytes(string name) {
    TextAsset text_asset = Resources.Load<TextAsset>(name);
    return text_asset.bytes;
}

// イメージ(Resources) → Base64
string ImageToBase64(string path) {
    byte[] byteArray = ImageToBytes(path);
    return Convert.ToBase64String (byteArray);
}

// 使用例
string base64Text = ImageToBase64("cat.jpg");
print(base64Text);

◎ Base64 → イメージ(Texture)

// byte配列 → イメージ(Texture)
Texture BytesToTexture(byte[] byteArray, int width, int height) {
    Texture2D texture = new Texture2D(width, height);
    texture.LoadImage(byteArray);
    return texture;
}

// Base64 → イメージ(Texture)
Texture Base64ToImage(string base64Text, int width, int height) {
    byte[] byteArray = Convert.FromBase64String(base64Text);
    return BytesToTexture(byteArray, width, height);
}

// 使用例
Texture texture = Base64ToImage(base64Text, 400, 400);
image.texture = texture;

2. JavaScript

◎ イメージ(HTMLImageElement) → Base64
mimeTypeは"image/png"または"image/jpeg"。

// イメージ(HTMLImageElement) → Base64
function image_to_base64(image, mime_type) {
    var canvas = document.createElement('canvas');
    canvas.width  = image.width;
    canvas.height = image.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    return canvas.toDataURL(mime_type);
}

// 使用例
var image = document.getElementById('image');
var base64Text = image_to_base64(image, "image/jpeg");

◎ Base64 → イメージ(HTMLImageElement)

// Base64 → イメージ(HTMLImageElement)
function base64_to_image(base64Text, callback) {
    var image = new Image();
    image.onload = function() {
        callback(image);
    };
    image.src = base64Text;
}

// 使用例
base64_to_image(base64Text, function(image) {
    document.getElementById('test').appendChild(image);
});