バックエンド開発PHPチュートリアルjQuery プラグイン Croppic + Intervention Image を使用して、Laravel 5 で画像のアップロードとトリミングを実装します。jQuery プラグイン Croppic + Intervention Image を使用して、Laravel 5 で画像のアップロードとトリミングを実装します。
1. 概要
多くの場合、ユーザー アバター用の画像アップロード コンポーネントを作成し、トリミング機能を実装する必要があります。各 Web サイトのレイアウトには独自のカスタム サイズがあり、その結果、サーバー上で画像がトリミングされ、画像の歪みが発生する可能性があります。このうち、私はクライアント側で画像を編集することを好みます。最近、この機能を簡単に実現できる jQuery プラグインを見つけました。この jQuery プラグインは Croppic です。
これは、Twitter、Facebook、または LinkedIn のユーザー アバター コンポーネントと同じように機能します。まず、ユーザーは操作する必要がある画像を選択し、適切だと感じたら、スライドとズームのオプションが提供されます。切り抜きボタンをクリックするだけです。とても簡単ではないでしょうか。
Croppic は次のように動作します:
- ブラウザウィンドウで画像を選択し、サーバーにアップロードします
- サーバーはアップロードしたばかりの画像へのリンクを返し、Croppic はこのリンクを通じて画像をレンダリングします
- ユーザーはスライドできます画像をズームし、切り抜きボタンをクリックすると、画像データがサーバーに送信されます
- サーバーは、画像の元のリンクと切り抜きの詳細: x 座標、y 座標、切り抜き幅、高さ、角度を受け取ります
- サーバーはトリミングの詳細データを使用して画像を処理し、成功した応答をクライアントに送信します
- 場合 プロセス全体でエラーが発生した場合、エラー メッセージを含むダイアログ ボックスがポップアップ表示されます
- トリミングが成功した後、最終的な画像がユーザーの Croppic ボックスに表示されます
- ユーザーは閉じるボタンをクリックして、プロセス全体を再実行できます
このチュートリアルでは、サーバー側の画像処理に Intervention Image 拡張パッケージを使用します。
注: このチュートリアルの完全なコードは Github にあります: https://github.com/codingo-me/laravel-croppic
2. Laravel プロジェクトをインストールして構成します
続行する前に必須このチュートリアルでは、まず Laravel プロジェクトの Croppic を作成し (既に作成されているものはスキップします)、次の設定を .env に追加します:
URL=http://croppic.dev/UPLOAD_PATH=/var/www/croppic/public/uploads/
注: 上記のドメイン名とパスは、特定の状況に応じて変更する必要があります。 。
介入/イメージがインストールされていない場合は、このチュートリアルを参照してください: Laravel 5 に介入イメージを統合して、イメージを作成、変更、圧縮する
3. Croppic オプション
JS オプション配列を通じて設定できます。 , Croppic は組み込みモーダルとして表示でき、カスタム データをバックエンドに渡したり、拡大縮小/回転係数を定義したり、画像出力要素を定義したり、アップロード ボタンをカスタマイズしたりできます。
FileReader API を介してクライアント側で画像のアップロードを開始することができます。これにより、上記の Croppic の動作方法の最初の 2 つの手順をスキップできますが、この解決策には欠点があります。一部のブラウザーは FileReader API をサポートしていません。
この例では、アップロードと切り抜き URL を定義し、切り抜きの幅と高さをバックエンドに手動で送信します。
var eyeCandy = $('#cropContainerEyecandy');var croppedOptions = { uploadUrl: 'upload', cropUrl: 'crop', cropData:{ 'width' : eyeCandy.width(), 'height': eyeCandy.height() }};var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions); eyeCandy 変数タグは Croppic DOM 要素をレンダリングします CroppedOptions 設定では、jQuery を使用してeyeCandy 要素のサイズ。ここでサイズを計算する必要があります。これは、フロントエンドで Bootstrap グリッドを使用しているため、ウィンドウが変わると幅と高さが変わります。
4. フロントエンド
上で述べたように、Bootstrap を使用し、Croppic 公式 Web サイトからカスタム スタイル (home.blade.php) をダウンロードしました:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Upload and edit images in Laravel using Croppic jQuery plugin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <link rel="stylesheet" href="plugins/croppic/assets/css/main.css"/> <link rel="stylesheet" href="plugins/croppic/assets/css/croppic.css"/> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Mrs+Sheppards⊂=latin,latin-ext' rel='stylesheet' type='text/css'></head><body><div class="container"> <div class="row margin-bottom-40"> <div class="col-md-12"> <h1 id="Upload-and-edit-images-in-Laravel-using-Croppic-jQuery-plugin">Upload and edit images in Laravel using Croppic jQuery plugin</h1> </div> </div> <div class="row margin-bottom-40"> <div class=" col-md-3"> <div id="cropContainerEyecandy"></div> </div> </div> <div class="row"> <div class="col-md-12"> <p><a href="http://www.croppic.net/" target="_blank">Croppic</a> is ideal for uploading profile photos, or photos where you require predefined size/ratio.</p> </div> </div></div><script src=" https://code.jquery.com/jquery-2.1.3.min.js"></script><script src="plugins/croppic/croppic.min.js"></script><script> var eyeCandy = $('#cropContainerEyecandy'); var croppedOptions = { uploadUrl: 'upload', cropUrl: 'crop', cropData:{ 'width' : eyeCandy.width(), 'height': eyeCandy.height() } }; var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions);</script></body></html> 5. 3 つ必要です。ルート 、ホームページ用、投稿リクエストのアップロード用、および投稿リクエストのトリミング用の 1 つ: <?phpRoute::get('/', 'CropController@getHome');Route::post('upload', 'CropController@postUpload');Route::post('crop', 'CropController@postCrop');
過去の経験に基づいて、Laravel が CSRF トークン エラーをスローすることがわかっているため、CSRF ミドルウェアで操作をトリミングしてアップロードします。
<?phpnamespace App\Http\Middleware;use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as BaseVerifier;class VerifyCsrfToken extends BaseVerifier{ /** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ 'upload', 'crop' ];} 6. バックエンド ロジック
画像モデルと移行ファイル
ここでは、画像のアップロードを追跡するためにデータベースを使用します。通常、画像とユーザーの間に関連付けが確立されます。ユーザーがその写真に関連付けられるようにします。
<?phpnamespace App\Models;use Illuminate\Database\Eloquent\Model;class Image extends Model{ protected $table = 'images'; public static $rules = [ 'img' => 'required|mimes:png,gif,jpeg,jpg,bmp' ]; public static $messages = [ 'img.mimes' => 'Uploaded file is not in image format', 'img.required' => 'Image is required' ];} 通常、私はモデルクラスを別のディレクトリ app/Models に置くことに慣れています。 以下は、イメージ テーブルを作成するための移行ファイルです:
<?phpuse Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreateImages extends Migration{ /** * Run the migrations. * * @return void */ public function up() { Schema::create('images', function (Blueprint $table) { $table->increments('id'); $table->text('original_name'); $table->text('filename'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('images'); }} 新しいデータベースとデータベース ユーザーを作成し、.env 内の対応するオプションに構成と資格情報を設定する必要があります。移行コマンドを実行できます: php 職人移行。
画像ロジックのアップロード
このメソッドは、ユーザーがブラウザ ダイアログから画像を選択した直後に呼び出されます:
public function postUpload(){ $form_data = Input::all(); $validator = Validator::make($form_data, Image::$rules, Image::$messages); if ($validator->fails()) { return Response::json([ 'status' => 'error', 'message' => $validator->messages()->first(), ], 200); } $photo = $form_data['img']; $original_name = $photo->getClientOriginalName(); $original_name_without_ext = substr($original_name, 0, strlen($original_name) - 4); $filename = $this->sanitize($original_name_without_ext); $allowed_filename = $this->createUniqueFilename( $filename ); $filename_ext = $allowed_filename .'.jpg'; $manager = new ImageManager(); $image = $manager->make( $photo )->encode('jpg')->save(env('UPLOAD_PATH') . $filename_ext ); if( !$image) { return Response::json([ 'status' => 'error', 'message' => 'Server error while uploading', ], 200); } $database_image = new Image; $database_image->filename = $allowed_filename; $database_image->original_name = $original_name; $database_image->save(); return Response::json([ 'status' => 'success', 'url' => env('URL') . 'uploads/' . $filename_ext, 'width' => $image->width(), 'height' => $image->height() ], 200);} まず、画像モデルの検証配列を使用して入力を検証し、画像形式を指定して宣言します。画像が必須であることを確認します。画像サイズなどの他の制約を追加することもできます。 検証が失敗した場合、エラー応答がバックグラウンドで送信され、Croppic はエラー ダイアログ ボックスもポップアップ表示します。
注: ネイティブのポップアップ ボックスは非常に見苦しいので、私は常に SweetAlert を使用します。SweetAlert を使用するには、croppic.js ファイルでアラートを検索し、行を sweetAlert("Oops..." に変更します)。 , response.message, 'error'); もちろん、SweetAlert 関連の css ファイルと js ファイルを HTML に導入する必要もあります。
我们使用 sanitize 和 createUniqueFilename 方法创建服务器端文件名，通常我还会创建 ImageRepository 并将所有所有方法放置到其中，但是这种方式更简单：
private function sanitize($string, $force_lowercase = true, $anal = false){ $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]", "}", "\\", "|", ";", ":", "\"", "'", "‘", "’", "“", "”", "–", "—", "—", "–", ",", "<", ".", ">", "/", "?"); $clean = trim(str_replace($strip, "", strip_tags($string))); $clean = preg_replace('/\s+/', "-", $clean); $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ; return ($force_lowercase) ? (function_exists('mb_strtolower')) ? mb_strtolower($clean, 'UTF-8') : strtolower($clean) : $clean;}private function createUniqueFilename( $filename ){ $upload_path = env('UPLOAD_PATH'); $full_image_path = $upload_path . $filename . '.jpg'; if ( File::exists( $full_image_path ) ) { // Generate token for image $image_token = substr(sha1(mt_rand()), 0, 5); return $filename . '-' . $image_token; } return $filename;} 创建完独立的文件名后，我们使用Intervention Image提供的 ImageManger 来保存上传的图片。从上传方法返回的响应中Croppic需要如下字段：保存图片的 status 、 url 、 width 和 height 。
裁剪图片逻辑
用户点击裁剪按钮后，Croppic会将用户数据发送到后端路由以便对图片执行裁剪。到这里，你应该看到了，Croppic不做任何实际裁剪工作:-)，它只负责发送x/y坐标以及裁剪的宽度和高度数据，具体的裁剪实现逻辑还需要在后台编写。Croppic项目为此提供了一些相关的php脚本，但这里我们仍然选择使用Intervention Image扩展包提供的方法：
public function postCrop(){ $form_data = Input::all(); $image_url = $form_data['imgUrl']; // resized sizes $imgW = $form_data['imgW']; $imgH = $form_data['imgH']; // offsets $imgY1 = $form_data['imgY1']; $imgX1 = $form_data['imgX1']; // crop box $cropW = $form_data['width']; $cropH = $form_data['height']; // rotation angle $angle = $form_data['rotation']; $filename_array = explode('/', $image_url); $filename = $filename_array[sizeof($filename_array)-1]; $manager = new ImageManager(); $image = $manager->make( $image_url ); $image->resize($imgW, $imgH) ->rotate(-$angle) ->crop($cropW, $cropH, $imgX1, $imgY1) ->save(env('UPLOAD_PATH') . 'cropped-' . $filename); if( !$image) { return Response::json([ 'status' => 'error', 'message' => 'Server error while uploading', ], 200); } return Response::json([ 'status' => 'success', 'url' => env('URL') . 'uploads/cropped-' . $filename ], 200);} 完整的控制器 CropController 看上去应该是这样的：
<?phpnamespace App\Http\Controllers;use App\Models\Image;use Illuminate\Support\Facades\Validator;use Illuminate\Support\Facades\Input;use Illuminate\Support\Facades\Response;use Intervention\Image\ImageManager;use Illuminate\Support\Facades\File;class CropController extends Controller{ public function getHome() { return view('home'); } public function postUpload() { $form_data = Input::all(); $validator = Validator::make($form_data, Image::$rules, Image::$messages); if ($validator->fails()) { return Response::json([ 'status' => 'error', 'message' => $validator->messages()->first(), ], 200); } $photo = $form_data['img']; $original_name = $photo->getClientOriginalName(); $original_name_without_ext = substr($original_name, 0, strlen($original_name) - 4); $filename = $this->sanitize($original_name_without_ext); $allowed_filename = $this->createUniqueFilename( $filename ); $filename_ext = $allowed_filename .'.jpg'; $manager = new ImageManager(); $image = $manager->make( $photo )->encode('jpg')->save(env('UPLOAD_PATH') . $filename_ext ); if( !$image) { return Response::json([ 'status' => 'error', 'message' => 'Server error while uploading', ], 200); } $database_image = new Image; $database_image->filename = $allowed_filename; $database_image->original_name = $original_name; $database_image->save(); return Response::json([ 'status' => 'success', 'url' => env('URL') . 'uploads/' . $filename_ext, 'width' => $image->width(), 'height' => $image->height() ], 200); } public function postCrop() { $form_data = Input::all(); $image_url = $form_data['imgUrl']; // resized sizes $imgW = $form_data['imgW']; $imgH = $form_data['imgH']; // offsets $imgY1 = $form_data['imgY1']; $imgX1 = $form_data['imgX1']; // crop box $cropW = $form_data['width']; $cropH = $form_data['height']; // rotation angle $angle = $form_data['rotation']; $filename_array = explode('/', $image_url); $filename = $filename_array[sizeof($filename_array)-1]; $manager = new ImageManager(); $image = $manager->make( $image_url ); $image->resize($imgW, $imgH) ->rotate(-$angle) ->crop($cropW, $cropH, $imgX1, $imgY1) ->save(env('UPLOAD_PATH') . 'cropped-' . $filename); if( !$image) { return Response::json([ 'status' => 'error', 'message' => 'Server error while uploading', ], 200); } return Response::json([ 'status' => 'success', 'url' => env('URL') . 'uploads/cropped-' . $filename ], 200); } private function sanitize($string, $force_lowercase = true, $anal = false) { $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]", "}", "\\", "|", ";", ":", "\"", "'", "‘", "’", "“", "”", "–", "—", "—", "–", ",", "<", ".", ">", "/", "?"); $clean = trim(str_replace($strip, "", strip_tags($string))); $clean = preg_replace('/\s+/', "-", $clean); $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ; return ($force_lowercase) ? (function_exists('mb_strtolower')) ? mb_strtolower($clean, 'UTF-8') : strtolower($clean) : $clean; } private function createUniqueFilename( $filename ) { $upload_path = env('UPLOAD_PATH'); $full_image_path = $upload_path . $filename . '.jpg'; if ( File::exists( $full_image_path ) ) { // Generate token for image $image_token = substr(sha1(mt_rand()), 0, 5); return $filename . '-' . $image_token; } return $filename; }} 如果操作成功，后台会返回裁剪后的图片链接，然后Croppic根据此链接显示新的图片。
声明：本文为译文，原文链接： https://tuts.codingo.me/upload-and-edit-image-using-croppic-jquery-plugin
誇大広告を超えて：今日のPHPの役割の評価Apr 12, 2025 am 12:17 AMPHPは、特にWeb開発の分野で、最新のプログラミングで強力で広く使用されているツールのままです。 1）PHPは使いやすく、データベースとシームレスに統合されており、多くの開発者にとって最初の選択肢です。 2）動的コンテンツ生成とオブジェクト指向プログラミングをサポートし、Webサイトを迅速に作成および保守するのに適しています。 3）PHPのパフォーマンスは、データベースクエリをキャッシュおよび最適化することで改善でき、その広範なコミュニティと豊富なエコシステムにより、今日のテクノロジースタックでは依然として重要になります。
PHPの弱い参照は何ですか、そしていつ有用ですか？Apr 12, 2025 am 12:13 AMPHPでは、弱い参照クラスを通じて弱い参照が実装され、ガベージコレクターがオブジェクトの回収を妨げません。弱い参照は、キャッシュシステムやイベントリスナーなどのシナリオに適しています。オブジェクトの生存を保証することはできず、ごみ収集が遅れる可能性があることに注意する必要があります。
PHPで__invoke Magicメソッドを説明してください。Apr 12, 2025 am 12:07 AM\ _ \ _ Invokeメソッドを使用すると、オブジェクトを関数のように呼び出すことができます。 1。オブジェクトを呼び出すことができるように\ _ \ _呼び出しメソッドを定義します。 2。$ obj（...）構文を使用すると、PHPは\ _ \ _ Invokeメソッドを実行します。 3。ロギングや計算機、コードの柔軟性の向上、読みやすさなどのシナリオに適しています。
同時性については、PHP 8.1の繊維を説明します。Apr 12, 2025 am 12:05 AM繊維はPhp8.1で導入され、同時処理機能が改善されました。 1）繊維は、コルーチンと同様の軽量の並行性モデルです。 2）開発者がタスクの実行フローを手動で制御できるようにし、I/O集約型タスクの処理に適しています。 3）繊維を使用すると、より効率的で応答性の高いコードを書き込むことができます。
PHPコミュニティ：リソース、サポート、開発Apr 12, 2025 am 12:04 AMPHPコミュニティは、開発者の成長を支援するための豊富なリソースとサポートを提供します。 1）リソースには、公式のドキュメント、チュートリアル、ブログ、LaravelやSymfonyなどのオープンソースプロジェクトが含まれます。 2）StackOverFlow、Reddit、およびSlackチャネルを通じてサポートを取得できます。 3）開発動向は、RFCに従うことで学ぶことができます。 4）コミュニティへの統合は、積極的な参加、コード共有への貢献、および学習共有への貢献を通じて達成できます。
PHP対Python：違いを理解しますApr 11, 2025 am 12:15 AMPHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHPは、シンプルな構文と高い実行効率を備えたWeb開発に適しています。 2。Pythonは、簡潔な構文とリッチライブラリを備えたデータサイエンスと機械学習に適しています。
PHP：それは死にかけていますか、それとも単に適応していますか？Apr 11, 2025 am 12:13 AMPHPは死にかけていませんが、常に適応して進化しています。 1）PHPは、1994年以来、新しいテクノロジーの傾向に適応するために複数のバージョンの反復を受けています。 2）現在、電子商取引、コンテンツ管理システム、その他の分野で広く使用されています。 3）PHP8は、パフォーマンスと近代化を改善するために、JITコンパイラおよびその他の機能を導入します。 4）Opcacheを使用してPSR-12標準に従って、パフォーマンスとコードの品質を最適化します。
PHPの未来：適応と革新Apr 11, 2025 am 12:01 AMPHPの将来は、新しいテクノロジーの傾向に適応し、革新的な機能を導入することで達成されます。1）クラウドコンピューティング、コンテナ化、マイクロサービスアーキテクチャに適応し、DockerとKubernetesをサポートします。 2）パフォーマンスとデータ処理の効率を改善するために、JITコンパイラと列挙タイプを導入します。 3）パフォーマンスを継続的に最適化し、ベストプラクティスを促進します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
