cropper.js 无法初始化没有显示任何错误

Posted

技术标签:

【中文标题】cropper.js 无法初始化没有显示任何错误【英文标题】:cropper.js could not be initialized not showing any error 【发布时间】:2021-12-16 18:37:33 【问题描述】:

大家好,我被 javascript 库cropper.js 卡住了。我想在上传图片时初始化裁剪器。我做了一个名为 temp 的函数,当输入类型文件更改时触发看看代码 html

<input
  type="file"
  name="cropableImage"
  id="cropableImageId"
  onchange="temp(this)" 
/>

javascript

function temp(input) 
  if(input.files && input.files[0]) 
    var reader = new FileReader();
    reader.onload = function(e) 
      $('#previewHolder').attr('src', e.target.result);
    
    reader.readAsDataURL(input.files[0]);
    $("#main_image_section").show();
    $("#choose_file").hide();
    $("#tools_section").show();
    const image=document.getElementById('previewHolder');
    cropper = new Cropper(image,  
      zoomable: true,
      scalable:true,
      rotatable:true,
      autoCropArea:0.5,
      background:false,
      modal:true,
      autoCrop: true, 
      viewMode: 0,
      cropBoxResizable:true,
      setDragMode:true,
    );
   else 
    alert('select a file to see preview');
    $('#previewHolder').attr('src', '');
  

当我选择图像时,函数正在运行并加载图像。控制台中没有显示错误。但是裁剪器没有初始化。

当我以另一种方式执行此操作时,它会起作用。就像我做了一个按钮,当点击按钮时,函数运行并且cropper被初始化。

但我需要在加载图像时对其进行初始化。

【问题讨论】:

你正在尝试初始化它,之前图像甚至已经加载。这需要进入reader.onload 回调。 【参考方案1】:

reader 必须花一些时间才能读取您上传的文件。这意味着new Cropperreader.onload 函数运行之前被调用。

如果您希望在读取文件后运行裁剪器,则在分配预览持有者图像的src 之后,将Cropper 的初始化移动到onload 回调中。

let cropper;
const previewHolder = document.getElementById("previewHolder");

function temp(input) 
  if (input.files.length) 
    const reader = new FileReader();
    reader.onload = function (e) 
      // Here the image is loaded. 
      // Set it to the preview holder.
      previewHolder.src = e.target.result;

      // Now the cropper should be able to use the loaded image.
      cropper = new Cropper(previewHolder, 
        zoomable: true,
        scalable: true,
        rotatable: true,
        autoCropArea: 0.5,
        background: false,
        modal: true,
        autoCrop: true,
        viewMode: 0,
        cropBoxResizable: true,
        setDragMode: true,
      );
    ;
    reader.readAsDataURL(input.files[0]);
  

【讨论】:

以上是关于cropper.js 无法初始化没有显示任何错误的主要内容,如果未能解决你的问题,请参考以下文章

使用 Cropper js 裁剪后图像质量降低

cropper.js剪裁框固定尺寸

上传图片截图预览控件不显示cropper.js 跨域问题

为啥我在 ASP.Net 中的cropper.js 文件上收到 404 错误,尽管它们正是程序正在寻找它们的位置?

freeglut 无法使用 valgrind 打开显示

Cropper.js的jQuery插件包装器。