[英]Cropper.js getValue is not working every time I upload a photo
I am using cropper.js to upload an image in a form.我正在使用cropper.js 以表格形式上传图像。 Sometimes it works fine, but sometimes when I upload the image and I use cropper.getValue it displays an error: Uncaught TypeError: Cannot read property 'naturalWidth' of undefined.
有时它可以正常工作,但有时当我上传图像并使用cropper.getValue 时会显示错误:未捕获的类型错误:无法读取未定义的属性“naturalWidth”。 How can i fix this?
我怎样才能解决这个问题?
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);
When you create an instance of Cropper you must destroy previuous instance.当您创建 Cropper 的实例时,您必须销毁先前的实例。 Calling.destroy() method.
调用.destroy() 方法。 This unbind Cropper and you must start it over again.
这个解绑 Cropper,你必须重新开始。 A short example:
一个简短的例子:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.