###前提・実現したいこと
Ruby on Railsでcropper-railsを利用して、
画像アップロード時にトリミング等を行う。
###発生している問題・エラーメッセージ
画像アップロードの画面(userのedit画面)を開くと、
コンソール上で下記エラーメッセージが表示されてJSが動作しない。
'Cropper' is undefined
###該当のソースコード
edit.html.erb
<% if @user.persisted? && @user.picture? %> <div id="crop_area_box"> <%= image_tag @user.picture, :id => "crop_image", :html => [:width => "240px"] %> </div> <% else %> <div id="crop_area_box"><img id="crop_image" /></div> <% end %> <div id="crop_preview"></div> <%= javascript_include_tag 'edit_avatar' %>
application.js
//= require rails-ujs //= require jquery //= require jquery_ujs //= require bootstrap //= require turbolinks //= require cropper //= require_tree .
assert.rb
Rails.application.config.assets.precompile += %w( *.js # JSはすべてAsset Pipeline対象とする cropper.css # 画像Crop用 )
edit_avarar.js
$(function(){ var fileName; // 画像ファイル選択後のプレビュー処理 $('form').on('change', 'input[type="file"]', function(event) { var file = event.target.files[0]; fileName = file.name; var reader = new FileReader(); var $crop_area_box = $('#crop_area_box'); // 画像ファイル以外の場合は何もしない if(file.type.indexOf('image') < 0){ return false; } // ファイル読み込みが完了した際のイベント登録 reader.onload = (function(file) { return function(event) { //既存のプレビューを削除 $crop_area_box.empty(); // .prevewの領域の中にロードした画像を表示するimageタグを追加 $crop_area_box.append($('<img>').attr({ src: event.target.result, id: "crop_image", title: file.name })); // プレビュー処理に対して、クロップ出来る処理を初期化設定 initCrop(); }; })(file); reader.readAsDataURL(file); }); var cropper; function initCrop() { cropper = new Cropper(crop_image, { dragMode: 'move', // 画像を動かす設定 aspectRatio: 1 / 1, // 正方形やで! restore: false, guides: false, center: false, highlight: false, cropBoxMovable: false, cropBoxResizable: false, toggleDragModeOnDblclick: false, minCropBoxWidth: 240, minCropBoxHeight: 240, ready: function () { croppable = true; } }); // 初回表示時 crop_image.addEventListener('ready', function(e){ cropping(e); }); // 画像をドラッグした際の処理 crop_image.addEventListener('cropend', function(e){ cropping(e); }); // 画像を拡大・縮小した際の処理 crop_image.addEventListener('zoom', function(e){ cropping(e); }); } // クロップ処理した画像をプレビュー領域に表示 var croppedCanvas; function cropping(e) { croppedCanvas = cropper.getCroppedCanvas({ width: 240, height: 240, }); // `$('<img>'{src: croppedCanvas.toDataURL()});` 的に書きたかったけど、jQuery力が足りず・・・ var croppedImage = document.createElement('img'); croppedImage.src = croppedCanvas.toDataURL(); crop_preview.innerHTML = ''; crop_preview.appendChild(croppedImage); } // Submit時に実行するPOST処理 $('#submitBtn').on('click', function(event){ // クロップ後のファイルをblobに変換し、AjaxでForm送信 croppedCanvas.toBlob(function (blob) { const fileOfBlob = new File([blob], fileName); var formData = new FormData(); // `employee[avatar]` は `employee` modelに定義した `mount_uploader :avatar, AvatarUploader` のコト formData.append('user[picture]', fileOfBlob); // EmployeeのID取得 const user_id = $('#user_id').val(); $.ajax('/picture/' + user_id + '/update', { method: "PATCH", // POSTの方が良いのかな? data: formData, processData: false, // 余計な事はせず、そのままSUBMITする設定? contentType: false, success: function (res) { // DOM操作にしたほうがいいのかな?その場合、アップロード後に実行するなどのポーリング処理的なサムシングが必要になりそう・・・ // なので、とりあえず簡単に`location.reload`しちゃう location.reload(); }, error: function (res) { console.error('Upload error'); } }); // S3にアップロードするため画質を50%落とす }, 'image/jpeg', 0.5); }); });
###試したこと
https://github.com/cristianbica/cropper-rails
公式サイトを基にgem追加、application.jsとapplication.cssにrequire文を追加。
http://omiend.hatenablog.jp/entry/2017/10/03/152439
上記サイトを参考に、assets.rbを追記して、
edit_avatarを作成しました。
###補足情報(言語/FW/ツール等のバージョンなど)
Ruby 2.3.1
Rails 5.1.4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。