Unauthentified image request on Safari, iOS and PC

[green-coder]

When the initial image is loaded, the request to get its content does not contain the authentication information that my server needs. It may be due to the way the img element is created.

A simple solution may be to have the img element in the Vue template.

[zhanziyang]

v0.1.5 now supports passing an Image object to initial-image prop.

see these demos:

1. https://jsfiddle.net/zhanziyang/02cLhjkn/2/
2. https://jsfiddle.net/zhanziyang/02cLhjkn/3/

[green-coder]

Running on the second link in Safari (and Chrome) on iOS gave me those errors and did not show the image.

If I remove the css, the loaded image is shown below Croppa, but not inside Croppa.

[zhanziyang]

The first warning message is a bug within croppa. I will fix it. But I'm not sure about the second one. I think it is caused by the same problem asked here. Please help me test it: https://jsfiddle.net/zhanziyang/02cLhjkn/5/ (I added "?v=0.0.1" at the end of the image url so that safari will not use the cached image)

---

If I remove the css, the loaded image is shown below Croppa, but not inside Croppa.

This is intended. In the seonde demo, croppa uses image outside of it as initial image. Usually you would like to hide it using css.

[green-coder]

This is intended. In the seonde demo, croppa uses image outside of it as initial image. Usually you would like to hide it using css.

I wanted to emphasize that the image was still loading correctly.

[zhanziyang]

Oh, I see. The external image does not need canvas, so there is no CORS restrition, thus it can load successfully.

Have you tried https://jsfiddle.net/zhanziyang/02cLhjkn/5/? Is the initial image shown correctly?

[green-coder]

I tested and the problem is still exactly the same.

[zabaat]

This fixed the issue for me. I'm using "vue-croppa": "^1.2.0",

Thanks for this lib!

[yannskee]

Hello I'm using version "^1.3.1" and I have the same issue. I'm calling the refresh() function below in the mounted() cycle My code :

<croppa
                v-if="cover_height" 
                v-model="file"
                canvas-color="transparent"
                :prevent-white-space="true"
                :height="cover_height"
                :auto-sizing="true"
                :show-remove-button="true"
                :remove-button-color="'black'"
                :remove-button-size="0"
                :file-size-limit="3000 * 1024"
                :initial-image="initial_image"
                accept=".jpeg,.png,.jpg"
                @file-size-exceed="errors.record({coverUrl:['Your image size must be less than 3MB.']})"
                @file-type-mismatch="errors.record({coverUrl:['Only the following extensions are accepted : jpg,jpeg,png']})"
                @draw="handleFileChange"
                @new-image="handleFileChange"
            >

refresh() {
            setTimeout(() => {
                    let image = new Image()
                    image.src = (this.imgUrl+'?_'+Date.now())
                    image.setAttribute('crossorigin', 'anonymous')
                    this.initial_image = image
                    this.file.refresh()                        
            },800)
        }

Can you please help fix this issue ? Thx