The first argument is required and must be an <img> or <canvas> element.

onukselcuk commented 3 years ago

I'm getting "The first argument is required and must be an <img> or <canvas> element."

Agontuk commented 3 years ago

Provide a sample how you're using it. You can also check the example project.

onukselcuk commented 3 years ago

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')
        }
      },    
    }

onukselcuk commented 3 years ago

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.