サンプル・プログラムの実行例
サンプル・プログラム
| file2img.php | サンプル・プログラム本体 |
準備：GDライブラリ
準備：初期値
解説：画像ファイルを読み込み，imgタグに埋め込み変換する
0175: /**
0176: * 画像ファイルを読み込み，imgタグに埋め込み変換する
0177: * @param string $fname 画像ファイル名
0178: * @param int $width 表示したい幅（ピクセル）
0179: * @param int $height 表示したい高さ（ピクセル）
0180: * @param array $items 読み込んだ画像ファイル情報格納用
0181: * @param string $errmsg エラーメッセージ格納用
0182: * @return string imgタグ／FALSE：変換失敗
0183: */
0184: function file2img($fname, $width, $height, &$items, &$errmsg) {
0185: //読み込み関数表
0186: $table = array(
0187: //画像形式 => 読み込み関数
0188: IMAGETYPE_BMP => 'imagecreatefrombmp',
0189: IMAGETYPE_GIF => 'imagecreatefromgif',
0190: IMAGETYPE_JPEG => 'imagecreatefromjpeg',
0191: IMAGETYPE_PNG => 'imagecreatefrompng',
0192: IMAGETYPE_WEBP => 'imagecreatefromwebp'
0193: );
0194: $html = '';
0195:
0196: //画像形式
0197: $imagetype = exif_imagetype($fname);
0198: $items['imagetype'] = $imagetype;
0199: if ($imagetype == FALSE) {
0200: $errmsg = '"' . $fname . '" が存在しないか，読み込むことができません';
0201: return FALSE;
0202: } else {
0203: foreach ($table as $key=>$func) {
0204: if ($imagetype == $key) {
0205: //画像ファイル読み込み関数の存否チェック
0206: if (! function_exists($func)) {
0207: $errmsg = 'GDライブラリをインストールしてください';
0208: return FALSE;
0209: //画像ファイル読み込み
0210: } else {
0211: $img0 = @$func($fname);
0212: if (! $img0) {
0213: $errmsg = '"' . $fname . '" を読み込むことができません';
0214: return FALSE;
0215: }
0216: //画像伸縮
0217: $width0 = imagesx($img0);
0218: $height0 = imagesy($img0);
0219: $items['width'] = $width0;
0220: $items['height'] = $height0;
0221: $magw = (float)$width / (float)$width0;
0222: $magh = (float)$height / (float)$height0;
0223: $mag = min($magw, $magh);
0224: $width1 = (int)($width0 * $mag);
0225: $height1 = (int)($height0 * $mag);
0226: $img1 = imagecreatetruecolor($width1, $height1);
0227: imagecopyresampled($img1, $img0, 0, 0, 0, 0, $width1, $height1, $width0, $height0);
0228:
0229: //画像データをBASE64エンコード
0230: ob_start();
0231: imagejpeg($img1);
0232: $ss = ob_get_contents();
0233: ob_end_clean();
0234: $ss = base64_encode($ss);
0235: $html = "<img src=\"data:image/jpg;base64," . $ss ."\" />";
0236: return $html;
0237: }
0238: break;
0239: }
0240: }
0241: }
0242: $errmsg = '"' . $fname . '" は変換できる画像形式ではありません';
0243:
0244: return FALSE;
0245: }
読み込む画像ファイル名と伸縮サイズを与えると、GDライブラリを使って画像の伸縮を行い、base64形式で埋め込んだimgタグを文字列として返す。おまけ機能として、読み込んだ画像の情報（画像形式、サイズ）を変数 $items に格納するようにした。
PNGやWEBPなど、読み込める画像形式は冒頭の関数表 $table に定義しておく。将来、GDライブラリが拡張された際には、この関数表に追加するだけで新しい画像形式に対応する。また、その画像形式を変換したくなければ、関数表から落としておけばよい。
画像伸縮には GDライブラリの imagecopyresampled 関数を利用している。
表示用画像は、 imagejpeg を使って一律にJPEG形式に変換する。
この関数は標準出力にデータを出力する。そこで、 ob_get_contents を使って、出力先を変数に切り替えてやり、この変数の値を関数 base64_encode を使ってbase64エンコードする。
解説：ファイルのドロップ
0073: <script>
0074: /**
0075: * ファイルのドロップ
0076: * @param evt イベント
0077: * @return なし
0078: */
0079: function handleFileSelect(evt) {
0080: evt.stopPropagation();
0081: evt.preventDefault();
0082:
0083: var files = evt.dataTransfer.files;
0084: var output = [];
0085:
0086: document.getElementById('upload').files = files;
0087: document.myform.submit();
0088: }
0089:
0090: function handleDragOver(evt) {
0091: evt.stopPropagation();
0092: evt.preventDefault();
0093: evt.dataTransfer.dropEffect = 'copy';
0094: }
0095:
0096: function PageLoad(evt) {
0097: var dropFrame = document.getElementById('DropFrame');
0098: dropFrame.addEventListener('dragover', handleDragOver, false);
0099: dropFrame.addEventListener('drop', handleFileSelect, false);
0100: }
0101: </script>
ファイルをドラッグする処理は、JavaScriptによって実現している。
ドラッグする場所はオブジェクトとして用意し、そのID名をあらかじめ変数 dropFrame に代入しておく。
関数 PageLoad は bodyタグをonLoadするときに実行すること。
