fengyuanchen/cropperjs

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

Open

#1,033 创建于 2023年1月23日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)JavaScript (12,111 star) (2,388 fork)batch import
help wantedquestion

描述

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);
             });
         });
     },
     });`
    

贡献者指南