为什么我无法访问Cropper JS的实例

问题描述

我在运行 loadImage() 函数时遇到问题，因为我无法访问变量cropper。我的最终目标是运行cropper.getCroppedCanvas 并将其返回值存储到输入中，以便我可以通过AJAX 发送它。

我正在尝试通过单击 savePicture 按钮来获取提到的值。

我有以下 JS 代码：

var imagetoCrop = document.getElementById('cropImage');


$('#editPicture').on('shown.bs.modal',function () {
  sourceActualPic = $('#actualPicture').attr('src');
  $('#cropImage').attr("src",sourceActualPic);
  iniciarCropper();
}).on('hidden.bs.modal',function () {
  var newPic = cropper.getCroppedCanvas({
    fillColor: '#ffffff'
  }).toDataURL();
  console.log(newPic);
  cropper.destroy();
  cropper = null;
});

function iniciarCropper() {

    var cropper = new Cropper(imagetoCrop,{
    viewmode: 2,dragMode: 'none',aspectRatio: 1 / 1,autoCropArea: 1,guides: true,cropBoxMovable: true,cropBoxResizable: true,minCropBoxWidth: 300,minCropBoxHeight: 300,toggleDragModeOnDblclick: false,modal: false
  });

  $('#savePicture').on('click',function () {
    loadImage();
  });

  setTimeout(function () {
    $('#savePicture').click();
  },100);

  var loadImage = function () {
    var newPic = cropper.getCroppedCanvas({
      fillColor: '#ffffff'
    }).toDataURL();
    document.getElementById('newPicture').value = newPic;
  }
}

这是我的 HTML：

  <div class="modal" tabindex="-1" role="dialog" id="editPicture">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edite su </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body justify-content-center" id="cropArea">
           <div class="imageContainer">
            <img src="" alt="" id="cropImage">
           </div>
        </div>
        <div class="modal-footer">
          <label class="btn btn-primary" for="customFile">
            <i class="fa white fa-camera" aria-hidden="true"></i>
          </label>
          <input type="file" class="d-none" id="customFile" onchange="getPicture(this)"/>
          <button type="button" id="savePicture" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Fin Modal  -->

  <h2 class="profile-subtitle"><?PHP echo l('You profile picture'); ?></h2>
  <div class="row">
    <div class=" col-md-12 profilePicture">
      <span>
        <img id="actualPicture" src="<?PHP echo getImg('users',$user->slug,'extramedium',$avataraPIsource); ?>" />
        <button type="button" data-toggle="modal" class="btn btn-danger editPicture" data-target="#editPicture"><i class="fa white fa-pencil fa-lg" aria-hidden="true"></i></button>
        <input class="d-none" id="newPicture" value='' type="file" name="newPicture">
      </span>
    </div>
  </div>

解决方法

好吧，我不得不做一些调整，但它是：

JS：

def split_text(text) -> list:
    start = 0
    chunk_size = 15
    chunk = ''
    chunks = []
    chunks_remaining = True

    while chunks_remaining:
        end = start + chunk_size
        if end >= len(text):
            chunks_remaining = False
        chunk = text[start:end]
        end = chunk.rfind(' ') + start
        chunks.append(text[start:end] + "...")
        start = end+1
    return chunks


def main():
    text = "This is just a text string for demonstrative purposes."
    chunks = split_text(text)
    print(chunks)

HTML：

chunk.rfind(' ')

这是一个功能性的 Cropper Js。当然，缺少 CSS 和 PHP，您需要使用 Bootstrap 进行一些装饰。