ECCUBE4デフォルトは画像リサイズ機能がない
ECCUBE4での商品画像登録機能には、ECCUBE2ではあった「画像のリサイズ処理」がありません。（バージョン4.05時点で）
ショッピングサイトの運用中にはWebサイト運営に不慣れな方が「スマホで撮った画像をそのままアップする」可能性があります。
仮に非常に大きなサイズの画像だった場合に、ECCUBE4デフォルトだと、それをそのままフロントに表示してしまいますので、表示速度の低下や転送量の圧迫など様々な問題が発生します。
出来ればアップロードした時に自動で画像サイズを制限したいですよね。
jQuery File Uploadを拡張することでリサイズできる
ECCUBE4のファイルアップロードで採用されている「jQuery File Upload」を拡張することで、クライアント側でのリサイズが可能になったのでご紹介します。
jQuery File Upload公式wikiにリサイズのやり方について記載されているので、これを参考にECCUBE4をカスタマイズしていきます。
尚、このカスタマイズは「ECCUBEバージョン4.05」で行っています。
カスタマイズのやり方
product.twigを用意する
まずは管理画面の商品登録のtwigをカスタマイズしますのでECCUBE4のカスタマイズ仕様にならって、src/Eccube/Resource/template/admin/Product/product.twigをapp/template/admin/Product/product.twigとしてコピーし、このファイルを書き換えていきます。
３つのファイルを用意してアップロード
上記公式wiki内では８つのファイルを読み込んでいますが、product.twigではそのうち５つを既に読み込んでいますので、残りの３つのファイルを新たにアップロードし、読み込ませます。
必要なファイルは「load-image.all.min.js」「canvas-to-blob.min.js」「jquery.fileupload-image.js」です。
上記公式wikiにそれぞれのファイルのURLがありますが、そのソースファイルのURLを直接参照するのではなく、独自サーバーにアップロードして使用してください。
※デフォルトで読み込まれている他の「jQuery File Upload」ファイルと同じようにassets/js/vendor/fileupload/内にアップロードすればよいでしょう。
product.twig内に記述を追加してファイルを読み込ませる
product.twigの40行目付近（下記の「新規追加」とあるファイルが新たに追加するファイルです。）
<script src="{{ asset('assets/js/vendor/fileupload/vendor/jquery.ui.widget.js', 'admin') }}"></script>
<script src=" load-image.all.min.js のURL "></script> <!-- 新規追加 -->
<script src=" canvas-to-blob.min.js のURL "></script> <!-- 新規追加 -->
<script src="{{ asset('assets/js/vendor/fileupload/jquery.iframe-transport.js', 'admin') }}"></script>
<script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload.js', 'admin') }}"></script>
<script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-process.js', 'admin') }}"></script>
<script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-validate.js', 'admin') }}"></script>
<script src=" jquery.fileupload-image.js のURL "></script> <!-- 新規追加 -->
fileupload関数に記述を追加する
３つのファイルを読み込む記述を足したら、次に同じproduct.twig内のfileupload関数にファイルを制限するオプションを追加します。
下記は横最大1000ピクセル、縦最大1000ピクセルになるようにした記述です。
product.twigの131行目付近（fileupload関数のオプションに追加します。）
$('#{{ form.product_image.vars.id }}').fileupload({
url: "{{ url('admin_product_image_add') }}",
・・・・
・・・・
disableImageResize: false,//新規追加 画像のリサイズを許可
imageMaxWidth: 1000,//新規追加 横幅の最大サイズ
imageMaxHeight: 1000, //新規追加 縦幅の最大サイズ
imageQuality: 0.7,//新規追加 リサイズした画像の画質
これで商品画像ファイルをアップロードした時に、画像サイズが横最大1000px ・縦最大1000pxに制限されるようになりました。
その他オプションについては下記URLに記述がありますので参考にしてください。