Coder Social home page Coder Social logo

Comments (7)

Norserium avatar Norserium commented on July 30, 2024

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

from vue-advanced-cropper.

leonardo-melhor-envio avatar leonardo-melhor-envio commented on July 30, 2024

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

from vue-advanced-cropper.

romain-aragon avatar romain-aragon commented on July 30, 2024

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

from vue-advanced-cropper.

romain-aragon avatar romain-aragon commented on July 30, 2024

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)

from vue-advanced-cropper.

romain-aragon avatar romain-aragon commented on July 30, 2024

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

from vue-advanced-cropper.

Norserium avatar Norserium commented on July 30, 2024

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

from vue-advanced-cropper.

petedrinnan avatar petedrinnan commented on July 30, 2024

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.

from vue-advanced-cropper.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.