connet.lolipop.jp
「登録」ページの「画像回転」操作によるデータの送受信
inrotate.js
              /** 
               * 「登録」ページの「画像回転」操作によるデータの送受信(非同期通信)
               */
					     
              function imgrotate(img_form, convert) {	
                // メッセージ
                if (document.getElementById("inp_imagename").value == '') {
                  document.getElementById("reaction").innerHTML = '画像データ入力は必須です!。';
                  return;
                }
                
                // レスポンスエリアをクリア
                document.getElementById("reaction").innerHTML = ' ';
                document.getElementById("imageshow").innerHTML = '';	
                
                // フォームオブジェクトを作成
                var img_form = document.getElementById(img_form);
                rotate_data = new FormData(img_form);
                
                // file読込み時
                if (convert == 'newfile') {
                  angle = 0;
                  // フォームにrotateフィールドを追加
                  rotate_data.append("rotate", angle);
                }
                
                // 回転角度を設定
                if (convert == 'r_rotate') {		
                  angle -= 90;
                  if (angle == -360) {
                  	angle = 0;
                  }	
                  // フォームにrotateフィールドを追加
                  rotate_data.append("rotate", angle);
                } else if (convert == 'l_rotate') {		
                  angle += 90;
                  if (angle == 360) {
                  	angle = 0;
                  }
                  // フォームにrotateフィールドを追加
                  rotate_data.append("rotate", angle);
                }
                
                if (rotate_data == "") {	
                    return;
                } else {    
                  // サーバーとの通信を形成してオブジェクトを作成
                  var xhr = new XMLHttpRequest();
                  xhr.onload = function (e) {
                    if (xhr.readyState == 4) {
                      if (xhr.status == 200) {
                        // 送信元のid属性名の指定タグへリクエスト結果を返す
                        document.getElementById("imageshow").innerHTML = xhr.responseText;
                      } else {
                        alert('Request Error');
                      }
                    }
                  };
                  xhr.onerror = function (e) {
                    alert('Network Error');
                  };        
                   
                  // リクエスト先に非同期で処理を指定
                  xhr.open("POST", "inimagerotate.php", true);
                  // フォームオブジェクトをPOSTで送信
                  xhr.send(rotate_data);
                }
              }
登録データの送受信
insert.js
              /**
               * 登録データの送受信(非同期通信)
               */
					    
              function form_insert(form_id) {	
                var formId = document.getElementById(form_id);
                // フォームオブジェクトを作成
                var insert_data = new FormData(formId); 
                
                if (insert_data == "") {
                    return;
                } else {    
                  // サーバーとの通信を形成してオブジェクトを作成 
                  var xhr = new XMLHttpRequest();
                  xhr.onload = function (e) {
                    if (xhr.readyState == 4) {
                      if (xhr.status == 200) {
                        // 送信元のid属性名の指定タグへリクエスト結果を返す
                        document.getElementById("reaction").innerHTML = xhr.responseText;
                      } else {
                        alert('Request Error');
                      }
                    }
                  };
                  xhr.onerror = function (e) {
                    alert('Network Error');
                  };
                   
                  // リクエスト先に非同期で処理を指定
                  xhr.open("POST", "insert2.php", true);
                  // フォームオブジェクトをPOSTで送信
                  xhr.send(insert_data);
                }
              }
「更新」ページの「画像回転」操作によるデータの送受信
uprotate.js
              /**
               * 「更新」ページの「画像回転」操作によるデータの送受信(非同期通信)
               */
					    
              function upimgrotate(uprotate_form, convert) {	
                // レスポンスエリアをクリア
                document.getElementById("reaction").innerHTML = '  ';
                
                // フォームオブジェクトを作成
                var obj_form = document.getElementById(uprotate_form);
                var uprotate_data = new FormData(obj_form);
                
                // 回転角度を指定
                if (convert == 'r_rotate') {
                	angle = -90;	
                	// フォームにrotateフィールドを追加
                	uprotate_data.append("uprotate", angle);
                } else if (convert == 'l_rotate') {		
                	angle = 90;
                	// フォームにrotateフィールドを追加
                	uprotate_data.append("uprotate", angle);
                }
                
                if (uprotate_data == "") {	
                    return;
                } else {    
                   // サーバーとの通信を形成してオブジェクトを作成
                   var xhr = new XMLHttpRequest();
                   xhr.onload = function (e) {
                     if (xhr.readyState == 4) {
                       if (xhr.status == 200) {
                         // 送信元のid属性名の指定タグへリクエスト結果を返す
                         document.getElementById("uprotateimageshow").innerHTML = xhr.responseText;
                       } else {
                           alert('Request Error');
                       }
                     }
                   };
                   xhr.onerror = function (e) {
                     alert('Network Error');
                   };        
                    
                   // リクエスト先に非同期で処理を指定
                   xhr.open("POST", "upimagerotate.php", true);
                   // フォームオブジェクトをPOSTで送信
                   xhr.send(uprotate_data);
                }
              }
更新データの送受信
update.js
              /**
               * 更新データの送受信(非同期通信)
               */
					    
              function updateform(form_id) {
                var formId = document.getElementById(form_id);
                var update_data = new FormData(formId);
                
                if (update_data == "") {
                    return;
                } else {    
                  // サーバーとの通信を形成してオブジェクトを作成 
                  var xhr = new XMLHttpRequest();
                  xhr.onload = function (e) {
                    if (xhr.readyState == 4) {
                      if (xhr.status == 200) {
                        // 送信元のid属性名の指定タグへリクエスト結果を返す
                        document.getElementById("reaction").innerHTML = xhr.responseText;
                      } else {
                        alert('Request Error');
                      }
                    }
                  };
                  xhr.onerror = function (e) {
                    alert('Network Error');
                  };
                   
                  // リクエスト先に非同期で処理を指定
                  xhr.open("POST", "update2.php", true);
                  // フォームオブジェクトをPOSTで送信
                  xhr.send(update_data);
                }
              }


プログラムの作成はこれで終了です。
メモリの初期設定
画像データを扱うため大量のメモリを消費します。
そこでプログラムを実行する前にメモリの設定などが書いてあるファイルをエディタで開いて、一度
確認してみて下さい。

1. php
-->php.ini(xampp/php/)

■ upload_max_filesize
アップロードする画像ファイルサイズより大きめに、ここでは6M(任意)に変更します。
(デジカメなどの写真一枚当たり2M~4M程かな)
デフォルトをコメント(;)して次のようにサイズを変更します。
;upload_max_filesize = 2M ⇐ デフォルト
 upload_max_filesize = 6M

■ post_max_size
POSTデータの最大サイズを指定します。ここではこのまま。
post_max_size = 8M ⇐ デフォルト
上記の「upload_max_filesize」と関連があり、こちらの値をより大きくする必要があります。

■ memory_limit
プログラムで最大使用するメモリ数を指定します。ここではこのまま。
memory_limit = 128M ⇐ デフォルト
プログラムを実行した時、次のようなメモリ不足のエラーメッセージが表示された場合は、デフォル
トのメモリ値を上げてみて下さい。当プログラムではデフォルト値のままでOk。
<エラーメッセージ>
Fatal error: Allowed memory size of ×××××bytes⋯⋯
※整理すると upload_max_filesize < post_max_size < memory_limit

以上、PHP7.2.9バージョンのメモリ関連の説明です。
設定変更した場合は必ず、「XAMPP Control Panel」から「Apache」ウェブサーバーを再起動して
変更した内容を有効にします。
-->コントロールパネル(xampp/xampp-control.exe) -ショートカットを作っておくと便利

または、Windowsのサービスに「Apache」が登録(インストール)してある場合は、
「スタート」->「コンピューターの管理」->「サービス」から「Apache」を再起動することも
可能です。が.....疲れる!。


2. MariaDB(Mysql)
phpMyAdminに標準搭載のMariaDBはテーブルを作成するとデフォルトでInnoDBエンジンが自動で選
択されます。
-->my.ini(xampp/mysql/bin/)

■ innodb_buffer_pool_size
テーブルなどのデータを格納するメモリ領域です。ここはサイズを大きく変更。
#innodb_buffer_pool_size = 16M ⇐ デフォルト
  innodb_buffer_pool_size = 128M

■ max_allowed_packet
Mysqlサーバーにはパケット制限値を指定する変数があります。大きめに変更。
#max_allowed_packet = 1M ⇐ デフォルト
  max_allowed_packet = 16M

■ innodb_log_file_size
insertステートメントが正常に機能するように大きめに変更。少ないとデータの挿入が出来ない場合
があります。
#innodb_log_file_size = 5M ⇐ デフォルト
  innodb_log_file_size = 32M

■ innodb_log_buffer_size
updateステートメント実行の際、トランザクションのコミットの動作を容易にするためここも大きめ
に変えて下さい。
#innodb_log_buffer_size = 8M ⇐ デフォルト
  innodb_log_buffer_size = 32M


以上、MariaDB(Mysql)10.1.35バージョンのメモリ関連の説明です。
設定変更した場合は必ず前述一項のPHPと同様に、こんどは「MySQL」サーバーの方を再起動して
変更した内容を有効にします。
プログラムの実行
・Apache / MySQLサーバーを起動
・ブラウザを立ち上げ、アドレスバーに以下のアドレスを入力します
    http://localhost/image-MariaDB-SampleApp/
・ブラウザの更新をクリック

確認出来たでしょうか、プログラムには必ずバグはつきものです、根気よく挑戦してみて下さい。
参考:サイト
upload_max_filesize — アップロードされるファイルの最大サイズ
post_max_size — POSTデータに許可される最大サイズを設定します
memory_limit — スクリプトが確保できる最大メモリをバイト数で指定します
innodb_buffer_pool_size — データのキャッシュ領域
max_allowed_packet — パケット制限値の指定
innodb_log_file_size — ログファイルサイズの指定
innodb_log_buffer_size — ログバッファーサイズの指定
PDO クラス — PHP とデータベースサーバーの間の接続を表します
$_FILES — HTTP ファイルアップロード変数
XMLHttpRequest-非同期リクエスト
beginTransaction — トランザクションを開始する
date_default_timezone_set — スクリプト中の日付/時刻関数で使用されるデフォルトタイムゾーンを設定する
imagecreatefromjpeg — 新しい画像をファイルあるいは URL から作成する
imagescale — 幅と高さを指定して、画像の縮尺を変更する
imagejpeg — 画像をブラウザあるいはファイルに出力する
append — フォームオブジェクト内の既存のキーに新しい値を追加するか、キーがまだ存在しない場合は追加します
FormData-フォームデータ等のオブジェクトを生成する
imagecreatefromstring — 文字列の中のイメージストリームから新規イメージを作成する
imagerotate — 指定された角度で画像を回転する
ob_start — 出力のバッファリングを有効にする
ob_get_clean — 現在のバッファの内容を取得し、出力バッファを削除する
Search
Google


↟ このページの先頭へ