fengyuanchen/cropperjs
View on GitHubExecuting crop multiple times makes the image move by 1px~ to a side (see video)
Open
#1033 opened on Jan 23, 2023
help wantedquestion
Description
Describe the bug Executing crop multiple times makes the image move by 1px~ to a side. It does not happene everytime, its like 50% of the time the bug exists. Also the direction in which the image moves is always a different. If it moves for example to the right, then every click will move it to the right.
To Reproduce Execute crop multiple times in a row
Expected behavior Image does not move.
Screenshots https://imgur.com/k0POBUW
Desktop
-
Windows
-
Chrome
-
109.0.5414.75
`let cropper = new Cropper(img_element, { background: false, viewMode: 1, autoCrop: true, dragMode: "move", modal: true, // display the dark background/edges autoCropArea: 1, // whole image is selected on default ready() { let rotate_left_btn = $('#cropper_func_' + cropper_element_id + ' button.cropper_rotate_left'); rotate_left_btn.off("click").on('click', function() { cropper.rotate(-90); }); let rotate_right_btn = $('#cropper_func_' + cropper_element_id + ' button.cropper_rotate_right'); rotate_right_btn.off("click").on('click', function() { cropper.rotate(90); }); let cropper_delete_btn = $('#cropper_func_' + cropper_element_id + ' button.cropper_delete'); cropper_delete_btn.off("click").on('click', function() { cropper.destroy(); cropper_functions.addClass('display-none-imp'); cropper_upload.removeClass('display-none'); let image_element = $('#cropper_img_' + cropper_element_id); let image_container = image_element.parents('.image_container'); image_element.attr('src', ''); // important for deleting image image_container.addClass('display-none'); }); let cropper_crop_btn = $('#cropper_func_' + cropper_element_id + ' button.cropper_execute'); cropper_crop_btn.off("click").on('click', function() { let cropped_canvas = cropper.getCroppedCanvas(); let _this = $(this); _this.attr('disabled', true); // The float is quality // This makes the image a lot bigger, toBlob() is better /*img_element.src = cropped_canvas.toDataURL('image/jpeg', 0.7); cropper.destroy(); initiate_cropper(img_element, cropper_element_id);*/ cropped_canvas.toBlob((blob) => { if (file !== null) { URL.revokeObjectURL(file); } img_element.src = URL.createObjectURL(blob); cropper.destroy(); initiate_cropper(img_element, cropper_element_id); _this.attr('disabled', false); }); }); }, });`