Блог

Я использую cropper.js чтобы загрузить изображение в форме. Иногда это работает нормально, но иногда, когда я загружаю изображение и использую cropper.GetValue, отображается ошибка: Uncaught TypeError: не удается прочитать свойство ‘naturalWidth’ undefined. Как я могу это исправить?

 var imageForm = document.querySelector(".userImage");
var fileInput = document.querySelector("input[name=user_photo]");

fileInput.addEventListener("change", function(event){

var reader = new FileReader();

reader.onload = function(){

var output          = document.querySelector('.croppr-image');
var submitImageCont = document.querySelector('#submitImage');

output.src = reader.result;

imageForm.insertBefore(output, submitImageCont);

var overlay = document.querySelector(".overlay")

overlay.classList.remove("displayNone");

var publicProfileForm = document.querySelector("form.publicProfile");

var cropper = new Croppr('#cropper', {
  onInitialize: (instance) => { console.log(instance); },
  onCropStart: (data) => { console.log('start', data); },
  onCropEnd: (data) => { console.log('end', data); },
  onCropMove: (data) => { console.log('move', data); }
});

var value = cropper.getValue();

publicProfileForm.querySelector("input[name=cropped_image_x]").value = value.x;
publicProfileForm.querySelector("input[name=cropped_image_y]").value = value.y;
publicProfileForm.querySelector("input[name=cropped_image_width]").value = value.width;
publicProfileForm.querySelector("input[name=cropped_image_height]").value = value.height;
}
}, false);
 

Когда вы создаете экземпляр Cropper, вы должны уничтожить предыдущий экземпляр. Вызов метода .destroy() . Это отменяет обрезку, и вы должны запустить ее заново. Короткий пример:

     var cropper = null;

    fileInput.addEventListener("change", function(event){
    
    // a lot of stuffs
    
    if(cropper){
        cropper.destroy();
    }
    
    cropper = new Croppr('#cropper', {
      onInitialize: (instance) => { console.log(instance); },
      onCropStart: (data) => { console.log('start', data); },
      onCropEnd: (data) => { console.log('end', data); },
      onCropMove: (data) => { console.log('move', data); }
    });
    
    // another stuffs
    }, false);