using image restriction 'none' and aspect ratio.

[leonardo-melhor-envio]

When adding these two properties to the "cropp" component, when generating the preview image, it does not align the source image to the center.

cropp component:



generated image:



implementation:

     <Cropper
        ref="cropper"
        :src="src"
        :stencil-props="{
          aspectRatio: 128/32,
          movable: true,
          resizable: true,
        }"
        :canvas="{
          maxWidth: 128,
          maxHeight: 32,
        }"
        image-restriction="none"
      />

Codesandbox

[Norserium]

@leonardo-melhor-envio, could you provide the codesandbox to reproduce your issue?

[leonardo-melhor-envio]

@Norserium I updated the content of the issue, with the codesandbox link.

[romain-aragon]

I have the same problem. Seems that is related to coordinates and/or visibleArea and/or image.transform.translateX/Y not "zoomed" from original image and canvas representation.

With a small resolution image, that is near correct

But with a high resolution src image, when I crop with small left margin

The left position is huge...

[romain-aragon]

In the exemple, the left (-249.57) is related to the image width (4284) but is applied as is in the canvas width 640)
instead -249 * 640 / 4284 (or something like that)

[romain-aragon]

Have a look in canvas.ts
const offsetX = coordinates.left < 0 ? -coordinates.left : 0;

The coordinates.left is related to the source image, you have to transform in canvas relative coordinates

[Norserium]

@leonardo-melhor-envio, @romain-aragon, try to update to the latest version (2.8.9 vue Vue 3, 1.11.7 for Vue 2).

[petedrinnan]

It appears that there is still a problem with version 2.8.9. When cropping smaller than the set canvas size, the image aligns to the left. If you crop larger than the image size, the image aligns to the right. To resolve this issue, I had to downgrade to version 2.8.7, which does not have this problem. I couldn't find in the git commits where this bug was introduced, though.