Comments (13)
Hello, @igogoson! I suppose, that you use the same variable for src
prop and for storing the cropper result. You shouldn't do it, because you will get the recursion.
from vue-advanced-cropper.
Just had the same issue.
What I have:
// Upload file
<b-form-file
v-model="avatarFile"
:state="Boolean(avatarFile)"
accept="image/jpeg, image/png, image/gif"
/>
// Convert uploaded file to Base64 and give it to Cropper
const reader = new FileReader()
reader.onload = e => {
console.log('It fires second')
this.imageToCropLinkOrBase64 = e.target.result
}
console.log('It fires first')
reader.readAsDataURL(this.avatarFile)
this.$bvModal.show('avatar-cropper-modal')
// Cropper
<b-modal
id="avatar-cropper-modal"
title="Create User"
@ok="addNewUser"
>
<cropper
classname="cropper"
:src="imageToCropLinkOrBase64"
:stencil-props="{ aspectRatio: 10/12 }"
@change="change"
/>
</b-modal>
The problem is within Converter code. I upload an 2.5MB image. The image has not uploaded, but modal with cropper already opened (i.e. opened without image). So, I needed to move modal opening inside reader.onload
, like this:
reader.onload = e => {
this.imageToCropLinkOrBase64 = e.target.result
this.$bvModal.show('avatar-cropper-modal')
}
This fixed the issue.
from vue-advanced-cropper.
@TitanFighter, are you saying, that you has the following error?
app.js:81265 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Have you encountered the recursive cropping?
from vue-advanced-cropper.
are you saying, that you has the following error?
Yes
Have you encountered the recursive cropping?
No. Maybe because I save cropped image to this.croppedImage
, not shown above.
from vue-advanced-cropper.
No. Maybe because I save cropped image to this.croppedImage, not shown above.
It makes your issue different than issue of @igogoson, and I still should investigate it carefully. I would be grateful for codesandbox that reproduces your problem.
from vue-advanced-cropper.
My problem comes when I do at @change="onChange". I can not read the canvas and yet I am using the exact code on your documentation. The image crops infinitely and I get the following error [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'toDataURL' of undefined"
my onChange function is
onChange({coordinates, canvas}) {
this.coordinates = coordinates
// You able to do different manipulations at a canvas
// but there we just get a cropped image
this.image = canvas.toDataURL()
}
and cropper looks like this
<Cropper
classname="upload-example-cropper"
:src="image"
@change="onChange"
/>
from vue-advanced-cropper.
Here is the link to the code. when I add @change method this happens
from vue-advanced-cropper.
@Norserium this is the demo you requested.
In codesandbox it works. I even tried to upload 10 mb photo + additionally tried to simulate a delay using setTimeout - still works :)
Probably I will be able to play a bit more locally with my project during the upcoming weekend in order to double-check the problem and inform you about the result.
from vue-advanced-cropper.
@igogoson, there is an error in your codesandbox.
Pay attention, you use the this.image
as the source image:
<Cropper class="upload-example-cropper" :src="image" @change="onChange"/>
But you put the result in the same variable:
onChange({coordinates, canvas}) {
this.coordinates = coordinates
// You able to do different manipulations at a canvas
// but there we just get a cropped image
this.image = canvas.toDataURL()
},
So, it lead to infinite recursion. You update the source image on change, then the cropper gets the updated image and crop it again, and etc.
You shouldn't use the same variable for result image and source. Compare your sandbox with this sandbox.
from vue-advanced-cropper.
@TitanFighter, thank you! If you succeed and catch the reason of this bug, please inform me.
from vue-advanced-cropper.
@Norserium I created a local freshly new project with the code from my linked demo - everything is ok. Probably my current project related issue, so in case if I catch this problem again - I will be back with more details.
from vue-advanced-cropper.
@TitanFighter, thank you! Keep me informed.
from vue-advanced-cropper.
@TitanFighter, @igogoson I close this issue, but if you encounter this problem in the future, feel free to write here.
from vue-advanced-cropper.
Related Issues (20)
- 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
- RTL Support Issue: Incorrect Cropper Behavior with postcss-rt
- Test support / documentation
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.