The first argument is required and must be an <img> or <canvas> element.
onukselcuk opened this issue · 7 comments
I'm getting "The first argument is required and must be an <img>
or <canvas>
element."
Provide a sample how you're using it. You can also check the example project.
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')
}
},
}
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.
необходимо понизить версию плагина
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!!
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!