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 (2,388 fork)batch import
help wantedquestion

倉庫指標

Star
 (12,111 star)
PR 合併指標
 (30 天內沒有已合併 PR)

描述

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

貢獻者指南