chosenFile with initial image

[petrmifek]

When a file was chosen more than once (incl. when using initial image), the reset function would destroy the information about the currently chosen file (this.getChosenFile() === null)

The change tries to keep the chosenFile around so that the getChosenFile returns the last file chosen (as expected).

[Neophen]

Hmm i can't get the build to work and i need this fix

[petrmifek]

I'm using just a git checkout of the repo and it works ok (for my use anyway), you might try that meanwhile...

[Neophen]

I've built it with node v10 and replaced the dist folder in my project with the built one, i stop seeing the new image on chooseFile. Can you show me how you're using croppa in your project?

also with doing that i get:

[Vue warn]: Error in v-on handler (Promise/async): "SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported."

Could you possibly share your fork of this and how you managed to setup this in your project i would be very grateful!

[petrmifek]

I'm actually using it in a Quasar project, which in turn uses Webpack (I think). So it packs it up for me I guess. As for the setup, it's just a basic git checkout, then importing it like:

import 'components/vendor/vue-croppa/dist/vue-croppa.css'
import Croppa from 'components/vendor/vue-croppa/src/cropper.vue'
...
  components: {
    Croppa: Croppa,
  },
...

EDIT: I also rebuilt the dist and pushed into edm-master branch in our for here, if you want to try that one: https://github.com/edmstudio/vue-croppa/tree/edm-master

[Neophen]

Ok so works fine for when not using initialImage, on choosing more files. but if i set initial image, then it keeps throwing: [Vue warn]: Error in v-on handler (Promise/async): "SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported." when trying to convert get the blob of the chosen file.

Any ideas of why that happens?

I've worked around this by not setting initial image and just showing the current image as a workaround. Since initial image causes too much trouble.

[petrmifek]

That's likely a different issue - check CORS headers returned from the server hosting the initial image, also try setting crossorigin="anonymous" prop in croppa.

BTW if still having trouble, feel free to make an (separate) issue not to divert this PR that much. If you have some sample code having that issue, I could have a look there. Thanks!

[Neophen]

Thank you @petrmifek your fix is working and i've decided against using initial image prop. it's just causing to much issues, so i simply render an image in an image tag. as i didn't really want the initial image to be editable anyways.

Thank you this has helped me!