<?phpRoute::get('/', 'CropController@getHome');Route::post('upload', 'CropController@postUpload');Route::post('crop', 'CropController@postCrop');
バックエンド開発
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>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 ミドルウェアで操作をトリミングしてアップロードします。 <?phpRoute::get('/', 'CropController@getHome');Route::post('upload', 'CropController@postUpload');Route::post('crop', 'CropController@postCrop');
<?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' ];}以下は、イメージ テーブルを作成するための移行ファイルです:
<?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'); }}
画像ロジックのアップロード
このメソッドは、ユーザーがブラウザ ダイアログから画像を選択した直後に呼び出されます:
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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7719
15
1641
14
1396
52
1289
25
1233
29
JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。
Apr 05, 2025 am 12:04 AM
JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。
セッションのハイジャックはどのように機能し、どのようにPHPでそれを軽減できますか？
Apr 06, 2025 am 12:02 AM
セッションハイジャックは、次の手順で達成できます。1。セッションIDを取得します。2。セッションIDを使用します。3。セッションをアクティブに保ちます。 PHPでのセッションハイジャックを防ぐための方法には次のものが含まれます。1。セッション_regenerate_id（）関数を使用して、セッションIDを再生します。2。データベースを介してストアセッションデータを3。
確固たる原則と、それらがPHP開発にどのように適用されるかを説明してください。
Apr 03, 2025 am 12:04 AM
PHP開発における固体原理の適用には、次のものが含まれます。1。単一責任原則（SRP）：各クラスは1つの機能のみを担当します。 2。オープンおよびクローズ原理（OCP）：変更は、変更ではなく拡張によって達成されます。 3。Lischの代替原則（LSP）：サブクラスは、プログラムの精度に影響を与えることなく、基本クラスを置き換えることができます。 4。インターフェイス分離原理（ISP）：依存関係や未使用の方法を避けるために、細粒インターフェイスを使用します。 5。依存関係の反転原理（DIP）：高レベルのモジュールと低レベルのモジュールは抽象化に依存し、依存関係噴射を通じて実装されます。
phpstormでCLIモードをデバッグする方法は？
Apr 01, 2025 pm 02:57 PM
phpstormでCLIモードをデバッグする方法は？ PHPStormで開発するときは、PHPをコマンドラインインターフェイス（CLI）モードでデバッグする必要がある場合があります。
システムの再起動後にUnixSocketの権限を自動的に設定する方法は？
Mar 31, 2025 pm 11:54 PM
システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります：sudo ...
PHPでの後期静的結合を説明します（静的：:)。
Apr 03, 2025 am 12:04 AM
静的結合（静的：:) PHPで後期静的結合（LSB）を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1）解析プロセスは実行時に実行されます。2）継承関係のコールクラスを検索します。3）パフォーマンスオーバーヘッドをもたらす可能性があります。
PHPのCurlライブラリを使用してJSONデータを含むPOSTリクエストを送信する方法は？
Apr 01, 2025 pm 03:12 PM
PHP開発でPHPのCurlライブラリを使用してJSONデータを送信すると、外部APIと対話する必要があることがよくあります。一般的な方法の1つは、Curlライブラリを使用して投稿を送信することです。
