This is the archived documentation for Doka Image Editor v7.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
Why does the editor throw a CORS error when processing an image?
The most likely cause of CORS errors is an incorrectly configured CORS policy on a remote server. A resource is deemed remote when it has a different domain, subdomain, protocol, or port as the local server.
Some examples of cross-origin requests:
https://my-site.com -> https://your-site.com
https://my-site.com -> https://sub.my-site.com
https://my-site.com -> http://my-site.com
https://my-site.com -> http://my-site.com:1234
We can determine if the CORS policy is configured incorrectly by looking at the network tab of our browser developer tools and inspecting the request. If the Access-Control response headers are turned CORS is configured.
Below we can see the request information when loading a test image from the PQINA webserver:
Request Headers
Url: https://pqina.nl/doka/test/cors/test.jpeg
Method: GET
Response Headers
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *
Content-Type: image/jpeg
A wildcard means that the file can be accessed from everywhere, it's best to set a specific origin.
Access-Control-Allow-Origin: https://my-site.com
If a specific origin is set (so no wildcard), we need to make sure the image is correctly cached as well. To do this we need to set the Vary header to Origin, see CORS and caching on MDN.
If for some reason the remote CORS policy can't be changed we can proxy the image request through the local server. In that situation we send the URL of the remote image to our local server, our local server then requests the remote image and returns the result to the front-end.
Additional information on setting a CORS policy:
HTML Canvas and CORS
Google Cloud and CORS
Amazon AWS S3 and CORS
An S3 bucket doesn't automatically send the Vary: Origin header, the Origin header needs to be present in the request for S3 to add it to Vary.
Azure and CORS
How to apply a circular crop mask to an image?
To apply a circular crop mask we can use the postprocessImageData hook available on the createDefaultImageWriter export. This hook allows us to modify the output image data before it is turned into a file.
To show a circular overlay on top of the crop controls we can use the willRenderCanvas hook available on every editor instance. This hook allows us to precisely control what the editor renders to the screen. We can make adjustments using the Shape API.
How to upload the output image?
We can upload output images by integrating with existing file upload solutions like FilePond, Dropzone, Uppy, or jQuery File Upload.
Alternatively we can use the store property of the createDefaultImageWriter export. If we set a path to the store property the editor will POST the file data to the supplied location. If we instead supply the property with a function we have fine grained control over where and how to upload the output image.
