![見出し画像](https://assets.st-note.com/production/uploads/images/19063191/rectangle_large_type_2_750ae8e89ee4cf5958d0977c3c560274.jpeg?width=800)
イメージと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);
});
この記事が気に入ったらサポートをしてみませんか?