【Rails】トリミング機能付き画像アップロードの実装方法(cropper.js)

更新日:

プログラミング初心者の勉強ブログ #90

Railsアプリに画像アップロードにトリミング機能を付ける方法です。「carrierwave」と「mini_magick」で実装したアップローダーに、「cropper.js」というjQueryライブラリを使って画像選択後トリミング画面を挟んでいきます。

 

目次

 

実装内容

トリミング機能

Railsアプリの「ユーザー編集画面」でトリミング機能付き画像アップロードを行います。

※jQueryインストール済み且つアップロード機能も実装済みであることを前提として書きます。

※file_fieldのデザイン変更やプレビュー表示については、【画像アップロード】file_fieldデザイン変更+画像選択時にプレビュー表示する方法に書いております。

 

viewのコーディング

users/edit.html.erb(抜粋)

 

viewでやることは

  • 画像アップロード用のfile_fieldの作成
  • プレビューを表示させるdivの作成
  • トリミング画面となるdivの作成

になるかと思います。今回はfile_fieldのデザインを変更しながら実装しているので、「#img_field」というdivのクリックでfile_fieldが展開し、且つプレビュー表示用のdivとして機能してます。

 

JavaScript(jQuery)のコーディング

cropper.jsのインストール

cropperjs/dist at master · fengyuanchen/cropperjs

上のGitHubより「cropper.min.js」を「assets/javascripts」下に、

「cropper.min.css」を「assets/stylesheets」下にセットします。

 

書き込むコード(JavaScript)

 

JSでは

  • 実際にトリミングを行う要素(cropper.js)の生成
  • トリミング後のプレビュー用の画像の取得と表示
  • フォームデータの取得
  • 画像データのblob形式への変換処理
  • コントローラーへパラメーターを送るためのajax処理

を行います。今回はformに入力された値をすべてjsで取得しているためその分冗長になってます。

ポイントは「formData」を用いてパラメーター送信をしている点と、CSRF対策をコーディングしておく点です。CSRF対策は開発環境では必要ありませんが、本番環境はこれが無いとエラーが出ます。

CSRFはそもそもはRailsが勝手にやってくれているもので、自分で勝手にajax通信するときはトークンを所得して送信しなければならないみたいです。

 

書き込むコード(CSS)

トリミング画面用div

 

controllerのコーディング

users_controller.rb(抜粋)

 

まとめ

当初はajaxなど使わず普通にlocal trueでform送信していたのですが、トリミング機能を付けるためだけにform送信を大幅に変更することになりました。おそらくもっと簡単に実装できる方法もあるのでは無いかと感じてます。

トリミング機能をつければ、こちらが指定したサイズで画像がすべて保存されるため、レイアウトがやりやすいです。

以上ありがとうございました。

-プログラミング学習
-,

Copyright© s u p ? , 2019 All Rights Reserved.