Uncaught TypeError: $(...).cropper(...).toBlob is not a function

priMo-ex3m commented 6 years ago

What's wrong in my code? I followed a example from "EXAMPLES" folder, and then add the "upload part", and it returns me Uncaught TypeError: $(...).cropper(...).toBlob is not a function ERROR. How can I fix my code to obtain that BLOB object ready for send to back-end ?

<head>
...
        <link href="{{asset('css/cropper.css')}}" type="text/css" rel="stylesheet" />
</head
<body>
    <div class="container">
    <h1>Crop on canvas with Cropper</h1>
    <h3>Image</h3>
    <div>
        <img id="image" src="{{ asset('storage') }}/5a323596c9d7b/avatars/test2.jpg" alt="Picture">
    </div>
    <h3>Canvas</h3>
    <div>
      <canvas id="canvas"></canvas>
    </div>
  </div>

    <script src="{{asset('js/jquery.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/cropper.min.js')}}" type="text/javascript"></script>
  <script>
    $(function () {
      var $canvas = $('#canvas');
      var $image = $('#image');
      var image = $image[0];
      function start() {
        var width = $(this).width();
        var height = $(this).height();
        var canvas = $canvas[0];
        var cropper;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(
          this,
          0, 0, this.naturalWidth, this.naturalHeight,
          0, 0, width, height
        );
        $canvas.cropper();
      }
      if (image.complete) {
        start.call(image);
      } else {
        $image.one('load', start);
      }
      $().cropper('getCroppedCanvas');

$().cropper('getCroppedCanvas', {
  width: 360,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$().cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();

  formData.append('croppedImage', blob);

  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});
    });

  </script>

P.S. It is possible to make a constant cropper box of 200x200 ?

priMo-ex3m commented 6 years ago

Forget about it, I just took the code from "modal example" and it works. So, I really don't care anymore about it :)

fengyuanchen commented 6 years ago

A big issues list for Uncaught TypeError: $(...).cropper(...).toBlob is not a function.

fengyuanchen / cropper

Uncaught TypeError: $(...).cropper(...).toBlob is not a function #942