fengyuanchen/cropperjs

Executing crop multiple times makes the image move by 1px~ to a side (see video)

Open

#1033 opened on Jan 23, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (12,111 stars) (2,388 forks)batch import
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);
             });
         });
     },
     });`
    

Contributor guide