zhanziyang/vue-croppa

Tainted canvas or CORS policy issue

Opened this issue · 2 comments

Setup 1

    <croppa
      v-model="imgData"
      placeholder="Upload Picture"
      :accept="'image/jpeg,image/jpg,image/png'"
      @image-remove="onImageRemoved()"
      @new-image-drawn="onNewImageDrawn()"
    >
      <img v-if="initialUrl" slot="initial" src="initialUrl">
    </croppa>

This results in a tainted canvas error when trying to generateBlob() from the photo selected for upload by the user. I know I could add crossorigin="anonymous" to the image element but then I need my firebase storage cors policy to allow anonymous origins which doesn't seem like a fair solution to the issue. How could I solve that issue more specifically?

Why does croppa need crossorigin="anonymous" while loading the image outside of the croppa tag works just fine (same origin).

@alexeigs same issue, did you find a solution?

@alexeigs same issue, did you find a solution?

temporary solve:
<img v-if="initial image"><vue-croppa v-show="!initial image">