ステップ23:画像をリサイズする

5.2版本
维护 没有维护的
5.0

画像をリサイズする

カンファレンスのページデザインでは,画像の最大サイズは200 x150ピクセルとして制限しています。アップロードされた画像がこの制限を超えていた際にサイズを変更し最適化するようにしてみましょう。

これはコメントのワークフローに追加する良い作業になります。コメントがバリデートされた直後でかつ公開する直前にが良いタイミングですね。

准备好了状態と优化遷移を新しく追加しましょう:

patch_file
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
——/ config /包/ workflow.yaml+ + + b / config /包/ workflow.yaml@@ -16,6 +16,7 @@框架:- potential_spam -垃圾邮件-拒绝+ -准备好了-发布的过渡:接受:@@ -29,13 +30,16 @@框架:到:垃圾邮件发布:从:potential_spam-:发表+:准备好了拒绝:从:potential_spam到:rejected publish_ham:从:ham-:发表+:准备好了Reject_ham:从:ham到:rejected+优化:+:准备好了发表的:+

新しいワークフロー設定の視覚表現を生成して,ここで行いたいことが記述されていることを検証します:

1
$ 欧宝娱乐app下载地址symfony控制台工作流:转储注释|工作流程png
. . / _images / workflow-final.png

想象で画像を最適化する

画像の最適化は,GD想象一下を使います(ローカルのPHPにGD拡張がインストールされていることを確認してください):

1
$ 欧宝娱乐app下载地址symfony composer req“想象/想象:^ 1.2”

画像のリサイズは次のサービスクラスを介して行います:

src / ImageOptimizer.php
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
名称空间应用程序;使用想象\ Gd \想象;使用想象\形象\盒子;ImageOptimizer{私人常量MAX_WIDTH=200;私人常量MAX_HEIGHT=150;私人美元的想象;公共函数__construct(){这个美元->想象一下=想象一下();}公共函数调整(字符串美元的文件名):无效{列表(iwidth美元,iheight美元)=getimagesize(美元的文件名);美元的比率=iwidth美元/iheight美元;美元的宽度=自我::MAX_WIDTH;美元的高度=自我::MAX_HEIGHT;如果(美元的宽度/美元的高度>美元的比率){美元的宽度=美元的高度*美元的比率;}其他的{美元的高度=美元的宽度/美元的比率;}美元的照片=这个美元->想象一下->开放(美元的文件名);美元的照片->调整(盒子(美元的宽度,美元的高度))->保存(美元的文件名);}}

オリジナルの画像をキープしておきたいと思うかもしれませんが,ここでは,画像を最適化した後に,新しいファイルをオリジナルと取り替えて格納します。

ワークフローに新しいステップを追加する

ワークフローを変更して新しい状態を処理します:

patch_file
12 34 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
——MessageHandler / src / / CommentMessageHandler.php+ + + MessageHandler b / src / / CommentMessageHandler.php@@ 2,6 +2,7 @@名称空间的应用程序\ MessageHandler;+使用App \ ImageOptimizer;使用App \ \ CommentMessage消息;使用App \ Repository \ CommentRepository;使用App \ SpamChecker;@@ -21,10 +22,12 @@类CommentMessageHandler实现MessageHandlerInterface私人美元总线;私人美元工作流;私人美元梅勒;+私人imageOptimizer美元;私人adminEmail美元;+私人photoDir美元;私人美元记录器;- public function __construct(EntityManagerInterface $entityManager, SpamChecker $ SpamChecker, CommentRepository $ CommentRepository, MessageBusInterface $bus, WorkflowInterface $commentStateMachine, MailerInterface $mailer, string $adminEmail, LoggerInterface $logger = null)+ public function __construct(EntityManagerInterface $entityManager, SpamChecker $ SpamChecker, CommentRepository $ CommentRepository, MessageBusInterface $bus, WorkflowInterface $commentStateMachine, MailerInterface $mailer, ImageOptimizer $ ImageOptimizer, string $adminEmail, string $photoDir, LoggerInterface $logger = null){$this->entityManager = $entityManager;$ this - > spamChecker = $ spamChecker;@@ -32,7 +35,9 @@类CommentMessageHandler实现MessageHandlerInterface$ this - >总线= $总线;= $ $ this - >工作流commentStateMachine;$ this - >梅勒= $梅勒;+ $this->imageOptimizer = $imageOptimizer;$ this - > adminEmail = $ adminEmail;+ $this->photoDir = $photoDir;$ this - >日志记录器= $记录器;}@@ -64,6 +69,12 @@类CommentMessageHandler实现MessageHandlerInterface- > ($ this - > adminEmail) - >上下文([“评论”= > $评论]));+} elseif ($this->workflow->can($comment, '优化')){+ if ($comment->getPhotoFilename()) {+ $ this - > imageOptimizer - >调整($ this - > photoDir‘/’。评论- > getPhotoFilename ());+}+ $ this - >工作流- >应用(美元评论,“优化”);+ $ this - > entityManager - >冲洗();} elseif ($this->logger) {$this->logger->debug(' drop comment message', ['comment' => $comment->getId(), 'state' => $comment->getState()]);}

前回のステップで,変数名photoDir美元をコンテナにバインドするように定義したので自動的にインジェクトされます:

配置/包/ services.yaml
1 2 3 4
服务:_defaults:绑定:photoDir美元:“% kernel.project_dir % /公共/上传照片”

本番でアップロードされたデータを格納する

.欧宝娱乐app下欧宝体育应用最新版app下载载地址symfony.cloud.yamlにファイルアップロードのためのディレクトリを読み書き可能として既に定義してあります。しかし,このマウントポイントはローカルのままです。Webコンテナやメッセージ取得処理ワーカーが同じマウントポイントにアクセスできるようにするには,ファイルサービスを作成する必要があります:

patch_file
1 2 3 4 5 6 7 8 9 10
——/ .sy欧宝娱乐app下载地址mfony / services.yaml+ + + b欧宝娱乐app下载地址 / .symfony / services.yaml@@ -19,3 +19,7 @@清漆:include类型:string路径:config.vcl++文件:+类型:网络存储:1.0+磁盘:256

画像のアップロードディレクトリで使用してください:

patch_file
1 2 3 4 5 6 7 8 9 10 11
——/ .sy欧宝娱乐app下欧宝体育应用最新版app下载载地址mfony.cloud.yaml+ + + b欧宝娱乐app下欧宝体育应用最新版app下载载地址 / .symfony.cloud.yaml@@ -37,7 +37,7 @@ web:挂载:"/var": {source: local, source_path: var}- "/public/uploads": {source: local, source_path: uploads}+ "/public/uploads": {source: service, service: files, source_path: uploads}钩子:构建:|

これで本番で正しく機能するようになりました。


  • «前ステップ22:Webpackでユーザーインタフェースにスタイリングする
  • 下一个”24:ステップCronを実行する

这项工作,包括代码样本,是在一个Creative Commons BY-NC-SA 4.0许可证。