Can't edit preloaded Images

[ghost]

When I preload images from our Server use the editor do do any change (or no change at all) and then hit "save" I'll get an error: "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.".

I already tried to set readerCrossOrigin to anonymous but then the Thumbnails will not even load with a "Access to image at '…' (redirected from '…') from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." error.

It would be totally fine to just get the info (rotated, cropped to) which will be processed on the server.

Is it possible to prevent the call to toDataURL?

[innostudio]

@ahlvd Thank you for reaching out.

May I see first a structure of one of your preload file? Something like https://innostudio.de/fileuploader/documentation/#options-preload-files

[ghost]

Of course. here you are:

{
    "name": "30335_49.jpg",
    "file": "/media/0335/30335/49/30335-49.jpg",
    "type": "image/jpeg",
    "size": 26162,
    "data": {
        "thumbnail": "/media/0335/30335/49/30335-49.jpg?width=225&height=175&quality=70",
        "file_id": 49
    }
}

[innostudio]

@ahlvd thumbnail is from another server right? The readerCrossOrigin you are putting in the data object, right?

[ghost]

Yes: Our server returns a redirect to anther Server for /media/URLs. Yes: readerCrossOrigin was in the data object.

[innostudio]

@ahlvd and how about readerCrossOrigin?

[ghost]

@innostudio Yes: readerCrossOrigin was in the data object.

[innostudio]

@ahlvd it seems like your second server is blocking the access.

Put the following code in .htaccess in /media/ folder

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

[ghost]

Sadly we don't have access to the server n that level because it's part of a CDN. I don't get the point why the image can be loaded initially but fails later. Isn't it possible to prevent the call to toDataURL? In this case it is not necessary to manipulate the image on client side.

[innostudio]

@ahlvd this is done for the thumbnails. How do you want to edit the image if you don't have access to that server?

[ghost]

@innostudio The CDN fetches the images from a shared storage where we place the images. So we can upload, delete, manipulate, invalidate cache etc. but I can not edit the Response-Headers of the CDN Servers. I have tried to provide the preloaded image thumbs as data-urls but that did not solve the problem either.

{
    "name": "30335_49.jpg",
    "file": "https://media.cdn.example/0335/30335/49/30335-49.jpg",
    "type": "image/jpeg",
    "size": 26162,
    "data": {
        "thumbnail": "data:image/jpg;base64,[...]",
        "file_id": 49
    }
}

[innostudio]

@ahlvd we've made an update. Please download again and replace the jquery.fileuploader.min.js

[ghost]

@innostudio Good work. Works just fine now! Thank you very much.

[innostudio]

@ahlvd Great. Thank you for your feedback.