Question

我正在尝试使用cropper.js将图像上传到服务器之前进行裁剪，但是出现以下错误：

“ cropper.js：1071未捕获的TypeError：无法读取的属性'css' 在控制台上上传大于25kb大小的图像时，请在控制台上选择“空”。图像大小小于25 kb没问题。

这是我的裁剪图片JS代码：

var canvas = $("#canvas"),

  context = canvas.get(0).getContext("2d"),
  $result = $('#result');
$('#canvas').addClass('hide');

$('#fileInput').on('change', function() {
  $('#canvas').removeClass('hide');

  if (this.files && this.files[0]) {

    if (this.files[0].type.match(/^image\//)) {
      $('#cropBtn').removeClass('hide');
      blobURL = URL.createObjectURL(this.files[0]);
      canvas.one('built.cropper', function() {

        // Revoke when load complete
        URL.revokeObjectURL(blobURL);
      }).cropper('reset').cropper('replace', blobURL);
      //$('#fileInput').val('');

      var reader = new FileReader();
      reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
          context.canvas.height = 350;
          context.canvas.width = 350;
          context.drawImage(img, 0, 0);
          var cropper = canvas.cropper({
            aspectRatio: 16 / 9,
            dragMode: 'move',
            responsive: true,
            restore: true
          });

          $('#btnCrop').click(function() {
            // Get a string base 64 data url
            $result.empty();
            croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/jpeg");
            $result.append($("<img class='img-thumbnail img-responsive img-responsive' style='max-width: 100%;height: auto;'>").attr('src', croppedImageDataURL));
            croppedImageDataURL = croppedImageDataURL.replace(/^data:image\/[a-z]+;base64,/, "");
            $('.cropper-container').hide();
            $('#cropBtn').addClass('hide');
            //console.log(croppedImageDataURL);
          });
          $('#btnRestore').click(function() {
            canvas.cropper('reset');
            $result.empty();
          });
        };
        img.src = evt.target.result;
      };
      reader.readAsDataURL(this.files[0]);
    } else {
      alert("Invalid file type! Please select an image file.");
    }
  } else {
    alert('No file(s) selected.');
  }

});

<html>
<head>
  <title>Cropper</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.js"></script>
</head>
<body>
  <div class="col-md-3">
    <div>
      <canvas id="canvas" class="hide">
        Your browser does not support the HTML5 canvas element.
      </canvas>
      <div id="cropBtn" class="hide">
        <input type="button" id="btnCrop" class="btn btn-info" value="Crop" />
      </div>
    </div>
    <!-- Profile Image -->
    <div class="box box-primary">

      <div class="box-body box-profile">
        <div id="result" class="text-center">

          <img class="profile-user-img img-responsive" src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="User profile picture">

        </div>

        <input type="file" id="fileInput" accept="image/*" class="text-center btn btn-primary btn-block file-upload">
      </div>
    </div>
    <!-- /.box-body -->
  </div>
  <!-- /.box -->
</body>
</html>

Answer 1

您的问题不是与Base64数据URL限制有关吗？可以看看：What is the size limit of a Base64 DataURL image?

我在cropper.js中收到错误“ cropper.js：1071 Uncaught TypeError：Can not read property'css'of null”

1 个答案: