質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

LaravelでCropperを使い画像の切り抜きをし登録したい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,029

score 0

前提・実現したいこと

LaravelでCropperを使って、画像の切り抜きをして、登録をする機能を作りたいです。

・ローカルからファイルを選択し画像を選択したら切り抜きするモーダルを表示する。
・モーダルのcropボタンを押すと、切り抜きした画像はpublic/storage/に保存し、モーダルを閉じて切り抜きされた画像が選択されている状態になる。
・その後、登録ボタンでデータベースに保存される。

発生している問題

モーダルのcropボタンを押しても何も反映されなくて困っています。。。(´;ω;`)

該当のソースコード

[image/add.blade.php]
@extends('layouts.app')

<form class="form-horizontal" action="{{ url('/') }}/image/add" method="post" enctype='multipart/form-data'>
    @csrf
   <label for="account" class="col-sm-4 col-form-label text-md-right">nama:</label> 
    <div class="col-md-6">
        <input type="text" name="account" size="50" value="{{old('name')}}" ></br>
    </div>
    <label for="image" class="col-sm-4 col-form-label text-md-right">image:</label>
    <div class="col-md-6">
        <input type="file" name="image" class="image" value="{{old('image')}}"></br>
    </div>
    <input type="submit" value="登録">
</form>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">画像編集</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
             </div>
                 <div class="modal-body">
                     <div class="img-container">
                         <div class="row">
                             <div class="col-md-8">
                                 <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                             </div>
                             <div class="col-md-4">
                                 <div class="preview"></div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                     <button id="crop" class="btn btn-primary">Crop</button>
                 </div>
             </div>
         </div> 
     </div>
<script type="text/javascript">
    // init
    // class='cropper-example-1のimgタグに適用'
    var $image = $('.cropper-example-1 > img'),replaced;

    //crop options
    // id='imgに適用'
    $('#img').cropper({
      aspectRatio: 4 / 4 // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9

      });
    </script>
[image.js]

'use strict';

var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$(function(){

$("body").on('change', '.image', function(e){
    var files = e.target.files;
    var done = function (url) {
      image.src = url;
      $modal.modal('show');
    };
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
      file = files[0];

      if (URL) {
        done(URL.createObjectURL(file));
      } else if (FileReader) {
       var reader = new FileReader();
        reader.onload = function (e) {
          done(reader.result);
        };
        reader.readAsDataURL(file);
      }
    }
});

$modal.on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode: 3,
      preview: '.preview'
    });
}).on('hidden.bs.modal', function () {
   cropper.destroy();
   cropper = null;
});
$("#crop").on('click',function(){
    canvas = cropper.getCroppedCanvas({
        width: 160,
        height: 160,
      });
    });
    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onloadend = function() {
            var base64data = reader.result;    

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'image/upload',
                data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
                success: function(data){
                    $modal.hide('slow');
                    alert("画像を登録しました!");
                }
              });
         }
    });
  });
[ImageController]

use Illuminate\Http\Request;
use Image;

public function add(Request $request){
        return view('image.add');
    }
    public function create(Request $request){
        $image = new Image;
        $form  = $request->all();
        unset($form['_token']);
        $image->fill($form)->save();
        return redirect('/image/add');

public function upload(Request $request)
  {   
    $folderPath = public_path('/storage/images/' );
    $image_parts = explode(";base64,", $request->image);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $file = $folderPath  . Auth::id() . '.jpg';

    file_put_contents($file, $image_base64);
    return response()->json(['success'=>'success']);
  }
[web.php]

Route::get('image/add', 'EngilController@add');
Route::post('image/add', 'EngilController@create');
Route::post('image/upload', 'EngilController@upload');
[layouts/app.blade.php]

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<script src="/image.js"></script>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />

補足情報

cropボタン以外は正常に動いてます。 cropボタンを押すとモーダルは閉じてimage/addのviewに戻りますが切り抜きしたimageが消えて無くなってしまいます。(データベースにも public_path('/storage/images/')にも保存されません。 cropボタンを反映させるには、どうしたら良いでしょうか。。

JavaScipt&jQuery初心者です。laravelもまだ半年です。。 記述の仕方など、めちゃくちゃで読みづらいかもしれません。。

ご助言いただけますと嬉しいです(´;ω;`)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • hayato7

    2020/04/27 23:40

    ボタンを押下した時、consoleにもなんのエラーも出ていないのでしょうか?

    キャンセル

  • mikimiki0055

    2020/04/27 23:51

    コメントいただきましてありがとうございます!
    エラーは何も出ていないのです。。。ただ、モーダルが閉じて、何事もなかったようになります。。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る