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.

Sign up for GitHub

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

Jump to bottom

using image restriction 'none' and aspect ratio. #265

Open
leonardo-melhor-envio opened this issue Jan 19, 2024 · 7 comments
Open

using image restriction 'none' and aspect ratio. #265

leonardo-melhor-envio opened this issue Jan 19, 2024 · 7 comments

Comments

@leonardo-melhor-envio
Copy link

leonardo-melhor-envio commented Jan 19, 2024 •
edited
Loading

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:
image


generated image:
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
Copy link
Collaborator

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

@leonardo-melhor-envio
Copy link
Author

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

@romain-aragon
Copy link

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.
image
With a small resolution image, that is near correct

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

The left position is huge...
image

@romain-aragon
Copy link

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
Copy link

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
Copy link
Collaborator

@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
Copy link

petedrinnan commented Jun 19, 2024 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Norserium @romain-aragon @petedrinnan @leonardo-melhor-envio