Comments (7)
@leonardo-melhor-envio, could you provide the codesandbox to reproduce your issue?
from vue-advanced-cropper.
@Norserium I updated the content of the issue, with the codesandbox link.
from vue-advanced-cropper.
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
from vue-advanced-cropper.
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.
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.
@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.
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)
- Missing stencil and duplicate view HOT 3
- Question: How to fit image to stencil, when it first loads HOT 2
- issue: getting canvas in composition api with <script setup> HOT 3
- I want to be able to edit the image preview list by clicking on it. HOT 3
- In Vue advanced cropper , the moving class (vue-rectangle-stencil--moving) is not removing automatically when I stop moving the mouse, but if I refresh the page once means , it is removing automatically and working as expected. HOT 1
- Saving/Retrieving cropper settings to re-apply at a later time HOT 1
- How to use defaultVisibleArea with values that have a very narrow or very wide size of square stencil HOT 1
- Wrong Width Height recognition HOT 2
- Image Cropping Failure for larger Images HOT 5
- The cropped image was found to be missing pixels HOT 1
- RTL Support Issue: Incorrect Cropper Behavior with postcss-rt HOT 1
- Test support / documentation
- Canvas instead of image HOT 6
- yarn add vue-advanced-cropper@vue-3 can't be resolved to a satisfying range HOT 2
- Issue with Cropping HEIC Files on Apple Devices HOT 8
- maxCanvasSize is used but not defined
- currentStencilSize was mentioned but never processed HOT 1
- Set position of fixed stencil
- Missing Cookies on CORS requests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-advanced-cropper.