サンプル・プログラムの実行例
サンプル・プログラム
| file2img.php | サンプル・プログラム本体 |
準備：GDライブラリ
準備：初期値
解説：画像ファイルを読み込み，imgタグに埋め込み変換する
175: /**
176: * 画像ファイルを読み込み，imgタグに埋め込み変換する
177: * @param string $fname 画像ファイル名
178: * @param int $width 表示したい幅（ピクセル）
179: * @param int $height 表示したい高さ（ピクセル）
180: * @param array $items 読み込んだ画像ファイル情報格納用
181: * @param string $errmsg エラーメッセージ格納用
182: * @return string imgタグ／FALSE：変換失敗
183: */
184: function file2img($fname, $width, $height, &$items, &$errmsg) {
185: //読み込み関数表
186: $table = array(
187: //画像形式 => 読み込み関数
188: IMAGETYPE_BMP => 'imagecreatefrombmp',
189: IMAGETYPE_GIF => 'imagecreatefromgif',
190: IMAGETYPE_JPEG => 'imagecreatefromjpeg',
191: IMAGETYPE_PNG => 'imagecreatefrompng',
192: IMAGETYPE_WEBP => 'imagecreatefromwebp'
193: );
194: $html = '';
195:
196: //画像形式
197: $imagetype = exif_imagetype($fname);
198: $items['imagetype'] = $imagetype;
199: if ($imagetype == FALSE) {
200: $errmsg = '"' . $fname . '" が存在しないか，読み込むことができません';
201: return FALSE;
202: } else {
203: foreach ($table as $key=>$func) {
204: if ($imagetype == $key) {
205: //画像ファイル読み込み関数の存否チェック
206: if (! function_exists($func)) {
207: $errmsg = 'GDライブラリをインストールしてください';
208: return FALSE;
209: //画像ファイル読み込み
210: } else {
211: $img0 = @$func($fname);
212: if (! $img0) {
213: $errmsg = '"' . $fname . '" を読み込むことができません';
214: return FALSE;
215: }
216: //画像伸縮
217: $width0 = imagesx($img0);
218: $height0 = imagesy($img0);
219: $items['width'] = $width0;
220: $items['height'] = $height0;
221: $magw = (float)$width / (float)$width0;
222: $magh = (float)$height / (float)$height0;
223: $mag = min($magw, $magh);
224: $width1 = (int)($width0 * $mag);
225: $height1 = (int)($height0 * $mag);
226: $img1 = imagecreatetruecolor($width1, $height1);
227: imagecopyresampled($img1, $img0, 0, 0, 0, 0, $width1, $height1, $width0, $height0);
228:
229: //画像データをBASE64エンコード
230: ob_start();
231: imagejpeg($img1);
232: $ss = ob_get_contents();
233: ob_end_clean();
234: $ss = base64_encode($ss);
235: $html = "<img src=\"data:image/jpg;base64," . $ss ."\" />";
236: return $html;
237: }
238: break;
239: }
240: }
241: }
242: $errmsg = '"' . $fname . '" は変換できる画像形式ではありません';
243:
244: return FALSE;
245: }
読み込む画像ファイル名と伸縮サイズを与えると、GDライブラリを使って画像の伸縮を行い、base64形式で埋め込んだimgタグを文字列として返す。おまけ機能として、読み込んだ画像の情報（画像形式、サイズ）を変数 $items に格納するようにした。
PNGやWEBPなど、読み込める画像形式は冒頭の関数表 $table に定義しておく。将来、GDライブラリが拡張された際には、この関数表に追加するだけで新しい画像形式に対応する。また、その画像形式を変換したくなければ、関数表から落としておけばよい。
画像伸縮には GDライブラリの imagecopyresampled 関数を利用している。
表示用画像は、 imagejpeg を使って一律にJPEG形式に変換する。
この関数は標準出力にデータを出力する。そこで、 ob_get_contents を使って、出力先を変数に切り替えてやり、この変数の値を関数 base64_encode を使ってbase64エンコードする。
解説：ファイルのドロップ
73: <script>
74: /**
75: * ファイルのドロップ
76: * @param evt イベント
77: * @return なし
78: */
79: function handleFileSelect(evt) {
80: evt.stopPropagation();
81: evt.preventDefault();
82:
83: var files = evt.dataTransfer.files;
84: var output = [];
85:
86: document.getElementById('upload').files = files;
87: document.myform.submit();
88: }
89:
90: function handleDragOver(evt) {
91: evt.stopPropagation();
92: evt.preventDefault();
93: evt.dataTransfer.dropEffect = 'copy';
94: }
95:
96: function PageLoad(evt) {
97: var dropFrame = document.getElementById('DropFrame');
98: dropFrame.addEventListener('dragover', handleDragOver, false);
99: dropFrame.addEventListener('drop', handleFileSelect, false);
100: }
101: </script>
ファイルをドラッグする処理は、JavaScriptによって実現している。
ドラッグする場所はオブジェクトとして用意し、そのID名をあらかじめ変数 dropFrame に代入しておく。
関数 PageLoad は bodyタグをonLoadするときに実行すること。
