質問編集履歴

edit_avatarのソースを追記。

2017/11/05 12:32

投稿

pharuq

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,7 +24,9 @@
 ###該当のソースコード
-```edit.html.erb
+edit.html.erb
+```
       <% if @user.persisted? && @user.picture? %>
@@ -52,7 +54,9 @@
-``` application.js
+application.js
+```
 //= require rails-ujs
@@ -70,9 +74,9 @@
 ```
-```assert.rb
+assert.rb
+```
 Rails.application.config.assets.precompile += %w(
@@ -88,6 +92,230 @@
+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