Comments (7)
I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.
from vue-cropperjs.
Provide a sample how you're using it. You can also check the example project.
from vue-cropperjs.
I'm using vue typescript in nuxt.js. cropper ref is not recognized. I couldn't find the proper type for it. I'm not sure if it's the only problem. I'm using the same setup in another project and it works fine. But the version is 4.1.0 in that project. I could try downgrading the package but I don't prefer to do it.
<input
ref="fileInput"
accept=".jpg, .jpeg, .png"
style="display: none"
type="file"
@input="onFileSelect"
/>
<Dialog
id="upload-profile-photo-dialog"
:visible.sync="imageCropperPopupActive"
:style="{ width: '50vw' }"
:modal="true"
class="popup-dialog"
>
<template #header>
<div class="header-top-red-line"></div>
<h2 class="dialog-header">Upload Profile Photo</h2>
</template>
<div>
<div class="w-full h-full">test</div>
<vue-cropper
v-show="imageCropperActive"
ref="cropper"
:src="selectedFile"
alt="Source Image"
></vue-cropper>
</div>
</Dialog>
...
interface $refs {
cropper: CropperData
fileInput: HTMLImageElement
}
...
data(){
imageCropperPopupActive: false as boolean,
imageCropperActive: false as boolean,
selectedFile: '' as string,
}
...
methods:{
onFileSelect(e) {
const file = e.target.files[0]
this.mime_type = file.type
if (typeof FileReader === 'function') {
this.imageCropperPopupActive = true
const reader = new FileReader()
reader.onload = (event) => {
// @ts-ignore
this.selectedFile = event.target.result
this.$refs.cropper.replace(this.selectedFile)
}
reader.readAsDataURL(file)
this.imageCropperActive = true
e.target.value = ''
} else {
alert('Sorry, FileReader API not supported')
}
},
}
from vue-cropperjs.
I'm on version 5, and getting this error
from vue-cropperjs.
необходимо понизить версию плагина
from vue-cropperjs.
I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.
this worked for me!!
from vue-cropperjs.
I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.
This worked for me. Thanks!
from vue-cropperjs.
Related Issues (20)
- Crop drag and resize not smooth HOT 3
- _cropperjs2.default is not a constructor HOT 2
- How work with base64 returns url? HOT 2
- Using replace() returns [Obj Obj] HOT 1
- Different cropped image result on different OS/screens (blurry images) HOT 1
- When we resize cropper and move cropper browser is crashed or sometimes its hangs too much HOT 1
- When we resize cropper and move cropper browser is crashed or sometimes its hangs too much. Cropper is not working smoothly at all HOT 2
- Vue-Cropperjs issue with 5.0.0 version HOT 2
- Can't see autoCrop Layout on image HOT 2
- replace() function doesn't work with the last version of Cropper JS HOT 1
- Maximum Call Stack exceed on cropping image HOT 2
- Can't Re-initialize the cropper
- Base64 as source
- Property does not exist on Type (Vue 3 + setup syntax + TS)
- Updating to vue 3.4.7 from 3.4.8 breaks things.
- How can I set an Options for minimum crop width and height ?
- vite build error : 'default' is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by node_modules HOT 2
- Error in render: "TypeError: (0 , _vue.h) is not a function" HOT 2
- Transparent background will become black background HOT 2
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.