[php+javascript+Sqlite] 画像DBを作る(2/5)

トップページ

メニュー表示。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：トップページ</title>
</head>
<body style="background:#edf5ff">
<h1>画像データベース</h1>
<br /><br />
<a href="insert.php">登録</a><br />
<a href="show_All.php">全データ表示</a>
<div>
</div>
</body>
</html>

Sqliteデータベースのオブジェクトを作成

関連するファイルからの呼び出しに応じて、データベースのオブジェクトを作成して返す。

ここではデータベース名は「image.db」とし、サイトのホルダーに作成してますが、作成場所は好みの位置でかまいません（なるべくならドキュメントルートには置かない方がよいでしょう）。

imageDB.php

<?php
/**
 * Sqliteのオブジェクトを作成
 */
               
function executeQuery(){        
try {
  // DBが存在しない場合は自動的に作成（’IF NOT EXISTS’の挿入は必須）
  $pdo = new PDO('sqlite:image.db');  
  $pdo->exec("CREATE TABLE IF NOT EXISTS image_table
  (id INTEGER PRIMARY KEY, imgName text, imgType text, imgContent blob, imgComment text, 
   created_at timestamp NOT NULL default (datetime(CURRENT_TIMESTAMP,'localtime')), 
   updated_at timestamp NOT NULL default (datetime(CURRENT_TIMESTAMP,'localtime'))
  )");
  return $pdo; 
} catch (Exception $e) {
    echo 'DB：Error！';
    echo $e->getMessage();
    $pdo = null;
}
}
?>

「登録」フォームを作成

アップロード画像ファイルとコメントの入力。
「画像回転」操作による傾き修正が可能。

insert.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：データ入力</title>
<script src="js/inrotate.js"></script>
<script src="js/insert.js"></script>
</head>
<body style="background:#edf5ff">
<h1>登録</h1>
<span id="reaction" style="color:#BC0000;font-weight:bold;"></span><br />    			
<form id="regform" name="regform" method="POST" enctype="multipart/form-data">
	<ul style="position:relative;left:-40px;display:flex;list-style:none;">
	  <li>
	  	<table border="0">
	      <tr>
	      <td>画像名：</td>
	      <td><input type="file" name="inp_imagename" id="inp_imagename" onchange="imgrotate('regform','newfile')" style="width:280px;font-size:1.2rem;"></td>
	      </tr>
	      <tr>
	      <td style="vertical-align:top;">コメント：</td><td><textarea name="comment" cols="32" rows="5"></textarea></td>
	      </tr>
	      <tr>
	      <td><a href="" onclick="javascript:form_insert('regform'); return false;">登録</a></td>
	      <td><button type="button" onclick="formreset()">リセット</button></td>	
	      </tr>
	  	</table>
	  	<br /><br />
	  	<a href="show_All.php">全データ表示</a><br />
	  	<a href="index.php">トップページ</a><br />
	  </li>
    <li>    </li>
    <li>
    	<span>画像回転：</span>
    	<span><input type="button" value="左へ90度回転" onclick="imgrotate('regform','l_rotate')" title="画像を左へ90度回転します。"></span>
    	<span><input type="button" value="右へ90度回転" onclick="imgrotate('regform','r_rotate')" title="画像を右へ90度回転します。"></span>
    	<br />
    	<div id="imageshow">image reading......</span></div>
    </li>	
	</ul>
</form>

<script>
<!--
function formreset() {
// フォームリセット
document.regform.reset();
// メッセージ
document.getElementById("reaction").innerHTML = '';
document.getElementById("imageshow").innerHTML = 'image reading......';
}
//-->
</script>
</body>
</html>

オリジナル画像を作成

「登録」ページからアップロード画像データを非同期通信経由で受け取り、回転画像（傾き修正）及びサイズ変更の画像データを作成。

inimagerotate.php

<?php
/**
 * オリジナル画像を作成
 */
	    
// セッションを開始
session_start();

$result = '';
// 入力チェック
if (isset($_FILES['inp_imagename']) && !empty($_FILES['inp_imagename']['name'])) {	
  // 画像ファイルタイプのチェック
  $file_name = htmlspecialchars($_FILES['inp_imagename']['name'], ENT_QUOTES); // ファイル名取得
  $file_Name_Type = pathinfo($file_name, PATHINFO_EXTENSION); // 拡張子(画像形式)を取得
  $type_name = strtolower($file_Name_Type); // 小文字に変換
  $type_name_array = array('jpg', 'png', 'gif');
  // 画像形式をチェック
  if(!in_array($type_name, $type_name_array)) {	
  	echo $result = '<span style="color:#BC0000;">画像形式のデータではありません!。</span>';
  	return;
  } else {
    // セッション変数に代入
    $_SESSION['file_name'] = $file_name; // ファイル名(××××.jpg[,png,gif])
    $_SESSION['image_type'] = $_FILES['inp_imagename']['type']; // MIMEタイプの取得－＞画像形式（image/jpeg[,png,gif]）		
    $_SESSION['type_name'] = $type_name; // 画像形式(jpg[,png,gif])
    $_SESSION['tmp_name'] = $_FILES['inp_imagename']['tmp_name']; // 一時保存のファイル名
    
    // 作成したい画像幅を指定（サイズを大きくすると当然DBサイズは大に画質は向上）
    $new_width = 400;
    // アスペクト比を維持
    $new_height = -1;
    
    // 回転角度を取得
    if(isset($_POST['rotate'])) {
      $rotate = $_POST['rotate'];
    }	
    // バッファリング開始
    ob_start();
    if ($_SESSION['type_name'] == 'jpg') {
      // 新規画像を作成
      $rotateimage = imagecreatefromjpeg($_SESSION['tmp_name']);
      // 画像の縮尺を変更
      $rotateimage = imagescale($rotateimage, $new_width, $new_height);				
      // 回転画像取得
      $rotateimage2 = imagerotate($rotateimage, $rotate, 0);
      // 画像ストリームを出力
      imagejpeg($rotateimage2, null, 100);	
    } elseif ($_SESSION['type_name'] == 'png') {
    	$rotateimage = imagecreatefrompng($_SESSION['tmp_name']);
    	$rotateimage = imagescale($rotateimage, $new_width, $new_height);
    	$rotateimage2 = imagerotate($rotateimage, $rotate, 0);
    	imagepng($rotateimage2, null, 9);				
    } elseif ($_SESSION['type_name'] == 'gif') {
    	$rotateimage = imagecreatefromgif($_SESSION['tmp_name']);
    	$rotateimage = imagescale($rotateimage, $new_width, $new_height);						
    	$rotateimage2 = imagerotate($rotateimage, $rotate, 0);
    	imagegif($rotateimage2, null);				
    }	
    // バッファ内容を取得
    $_SESSION['imagecontent'] = ob_get_clean();
    // メモリを開放
    imagedestroy($rotateimage);
    imagedestroy($rotateimage2);		
  }
} else {
    return;
}
?>
<!--// HTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：オリジナル画像を作成</title>
</head>
<body style="background:#edf5ff">
<!--// date関数のデータを使って、サーバーから最新の画像を取得・表示。-->
<img src="rotateimageshow.php?date=<?php print date('YmdHis'); ?>" alt="newimage" /><br />
<?php print $_SESSION['file_name']; ?>
</body>
</html>