Comments (15)
Could you provide more code? What is
this
here? What's props do you send to cropper?
this
is in reference to my local component data.
Cropper component:
<cropper
:src="uploadedPhoto"
class="cropper"
@change="cropImage"
/>
cropImage method (using TypeScript):
cropImage({ coordinates, canvas }: {
coordinates: { width: number, height: number, left: number, top: number },
canvas: HTMLCanvasElement
}) {
this.coordinates = coordinates;
canvas.toBlob(blobData => {
this.croppedPhoto = blobData;
})
}
from vue-advanced-cropper.
Hello!
I've just tested this scenario and it is processed correctly.
Could you test uploading images at this example? What's the uploading images? What's the version of Firefox do you use?
from vue-advanced-cropper.
The version of Firefox I'm using is 69.0.1. The images are just regular PNG's, JPG's, JPEG's. I used the exact method you linked in the first place.
After further investigation, it seems like it clears at first but once my image is actually saved to the db, the coordinates mess up.
from vue-advanced-cropper.
Let's define. Does this problem occur in my examples or this problem is specific to your code only? In the second case me need additional details about your code or an example at the codesandbox.
from vue-advanced-cropper.
Let's define. Does this problem occur in my examples or this problem is specific to your code only? In the second case me need additional details about your code or an example at the codesandbox.
Do you want anything specific in terms of my code?
from vue-advanced-cropper.
First of all, I want to know, could you reproduce this problem at the documentation examples.
Secondly, if it's not possible, me need details about your specific case. Maybe, code that uses this library or something else.
from vue-advanced-cropper.
-
No, I could not.
-
When uploading the image I'm using the code you listed in the documentation. When clearing the input, I'm setting my image to null and my coordinates back to 0. Maybe I'm not correctly resetting my state? Here's what I'm using to reset it:
this.coordinates = { left: 0, height: 0, top: 0, width: 0}
this.uploadedPhoto = ""
this.croppedPhoto = null
I have also noticed these errors but I don't know if it's of any help:
from vue-advanced-cropper.
Could you provide more code? What is this
here? What's props do you send to cropper?
from vue-advanced-cropper.
And what's happening with uploadedPhoto
?
from vue-advanced-cropper.
And what's happening with
uploadedPhoto
?
Exactly what is in your docs when uploading a photo.
from vue-advanced-cropper.
Try to update to 0.12.4
. I suppose, that the cause of this issue is incorrect handling of setting empty src
prop value, and I've fixed this bug in the new version.
from vue-advanced-cropper.
Try to update to
0.12.4
. I suppose, that the cause of this issue is incorrect handling of setting emptysrc
prop value, and I've fixed this bug in the new version.
This fixed it!
There are some type errors I thought you should know about though:
from vue-advanced-cropper.
Canvas is undefined
if src
prop is empty. Maybe it's not obviously, but sending an empty canvas value is not the best solution too.
There is temporary fix:
cropImage({ coordinates, canvas }: {
coordinates: { width: number, height: number, left: number, top: number },
canvas: HTMLCanvasElement
}) {
this.coordinates = coordinates;
if (canvas) {
canvas.toBlob(blobData => {
this.croppedPhoto = blobData;
})
} else {
this.croppedPhoto = null;
}
}
from vue-advanced-cropper.
Canvas is
undefined
ifsrc
prop is empty. Maybe it's not obviously, but sending an empty canvas value is not the best solution too.There is temporary fix:
cropImage({ coordinates, canvas }: { coordinates: { width: number, height: number, left: number, top: number }, canvas: HTMLCanvasElement }) { this.coordinates = coordinates; if (canvas) { canvas.toBlob(blobData => { this.croppedPhoto = blobData; }) } else { this.croppedPhoto = null; } }
Awesome man. Thanks so much for helping me out. I really appreciate it!
from vue-advanced-cropper.
You are welcome!
from vue-advanced-cropper.
Related Issues (20)
- Event problem HOT 2
- Getting the color in the image at the mouse position HOT 1
- More detailed events please?? HOT 2
- I am unable to use Cropper in my bootstrap modal. HOT 2
- Cropper doesn't work after deployment. HOT 20
- Usage of the cropper in Composition API through a composable/util HOT 13
- Bug Cropper: no emit resize-end or move-end events in modal HOT 1
- 你好,如果想修改为支持:选中的区域为任意四边形(四个内角都不能大于180度)而不是矩形,需要修改哪里啊? HOT 1
- No matching version found for vue-advanced-cropper@next HOT 1
- 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 1
- I want to be able to edit the image preview list by clicking on it. HOT 1
- using image restriction 'none' and aspect ratio. HOT 5
- 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 1
- The cropped image was found to be missing pixels HOT 1
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.