「登録」フォームを作成
アップロード画像ファイルとコメントの入力。
「画像回転」操作による傾き修正が可能。
insert.php
「画像回転」操作による傾き修正が可能。
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
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>
オリジナル画像を表示
「登録」ページに、アップロード画像及び「画像回転」操作の画像を表示。
rotateimageshow.php
rotateimageshow.php
<?php
/**
* オリジナル画像表示
*/
// セッション開始
session_start();
header('content-type:' .$_SESSION['image_type']);
print $_SESSION['imagecontent'];
exit;
?>
登録処理
「登録」ページから非同期通信経由でデータを受け取り、登録を実行。
insert2.php
insert2.php
<?php
/**
* 登録の実行
*/
// セッション開始
session_start();
// データベースに接続
require_once('imageDB.php'); // 読込み一回
$pdo = executeQuery();
$result = '';
if(empty($_FILES['inp_imagename']['name']) || !isset($_SESSION['file_name'])) {
print $result = '画像データ入力は必須です！。';
return;
} else {
$imagecomment = htmlspecialchars($_POST['comment'], ENT_QUOTES); // コメント
// 登録－INSERTステートメント
$sql = 'INSERT INTO image_table (imgName, imgType, imgContent, imgComment, created_at, updated_at)
VALUES(:imgName, :imgType, :imgContent, :imgComment, now(), now())';
try {
// エラー処理モード設定
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
// トランザクションの開始
$pdo->beginTransaction();
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':imgName', $_SESSION['file_name'], PDO::PARAM_STR);
$stmt->bindValue(':imgType', $_SESSION['image_type'], PDO::PARAM_STR); // image/jpeg[,png,gif]
$stmt->bindValue(':imgContent', $_SESSION['imagecontent'], PDO::PARAM_STR); // セッション変数から登録
$stmt->bindValue(':imgComment', $imagecomment, PDO::PARAM_STR);
$stmt->execute();
$pdo->commit();
print $result = '<span style="color:#0000FF;font-weight:bold;">画像データ［'.$_SESSION['file_name'].'］を登録しました。</span>';
} catch(PDOException $e) {
$pdo->rollback(); // エラーなら何もせず戻す
print '登録に失敗しました! '.$e->getMessage();
}
}
$pdo = null;
?>
Search
