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