Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
90Roman opened this issue Jan 23, 2023 · 0 comments

Comments

@90Roman
Copy link

90Roman commented Jan 23, 2023

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);
             });
         });
     },
     });`
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants