PHPとJavascriptでイメージ画像のリサイズとアップロード

PHPとJavascriptでイメージ画像のリサイズとアップロードタイトルイメージ

PHPとJavascriptでイメージ画像のリサイズとファイルアップロードを行う

PHP 開発環境がない場合は「 AlmaLinux8.6, PHP8.1, MySQL8, Apache 」で LAMP 環境を構築後に実施



練習1 : イメージ画像のリサイズとアップロード


▼ イメージ画像選択、プレビュー表示ページ

image_resize.php

  • <input type="file" accept="image/*"... : ファイル種別をイメージファイルに指定

(ブラウザ表示)


▼ イメージ画像リサイズ、プレビュー表示処理

image_resize.js


▼ イメージ画像保存ページ

image_resize_result.php

(ブラウザ表示)


ポイント

  • イメージ画像をJavascriptでリサイズ(通信容量の縮小)
  • イメージ画像をJavascriptで正方形にトリミング
  • イメージ画像をbase64データに変換