search

zhanziyang / vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
https://zhanziyang.github.io/vue-croppa/
ISC License
967 stars 128 forks source link

Tainted canvas or CORS policy issue #180

Open alexeigs opened 5 years ago

alexeigs commented 5 years ago

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).

yiyasha15 commented 1 year ago

@alexeigs same issue, did you find a solution?

yiyasha15 commented 1 year ago

@alexeigs same issue, did you find a solution?

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