[PHP]GDで作った画像をファイル化せずに直接<img>タグで表示する

Posted on 2014/07/10,
by  in PHP
このエントリーをはてなブックマークに追加
Pocket

html の <img> タグは src 属性にファイル名を指定するのが通常ですが、
Data URI スキームを利用することで画像データを html そのものに埋め込むことが出来ます。

書式は「data:MIMEタイプ;base64,データの内容」です。
画像そのものを html ソースに記述するためソース内には大量の文字の羅列がうめつくされることになります。
また、Safari, Chrome, FireFox などの主要ブラウザでは正しく表示されますが、IE に関しては IE8 以上でないと表示されない上、IE8 ではファイルサイズの上限が 32KB までとなっているため注意が必要です。 

<?php
$img = imagecreatetruecolor(100, 100);

$color1 = imagecolorallocate($img, 30, 50, 170);
$color2 = imagecolorallocate($img, 255, 255, 255);
$color3 = imagecolorallocate($img, 230, 0, 0);

imagefill($img, 0, 0, $color2);

imagefilledellipse($img, 50, 50, 90, 90, $color1);
imagefilledellipse($img, 50, 50, 60, 60, $color2);
imagefilledellipse($img, 50, 50, 30, 30, $color3);

ob_start();
imagejpeg($img, null, 90);
$content = base64_encode(ob_get_contents());
ob_end_clean();
imagedestroy($img);
?><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img src="data:image/jpeg;base64,<?php echo $content;?>" alt="sample" />

</body>
</html>

roundel

HTML ソース


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRg（中略）AKKKKAP/Z" alt="sample" />

</body>
</html>

参考
http://ja.wikipedia.org/wiki/Data_URI_scheme

Similar Posts:




コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です