Cross-origin images
A remote image can display successfully yet be unavailable for pixel export. Browser canvas access depends on how the image was requested and the server’s CORS response.
Browser export
The default crossOrigin={true} requests the image in anonymous CORS mode. A cross-origin server must permit your origin with Access-Control-Allow-Origin. Without permission, loading fails and onError fires.
Setting crossOrigin={false} can permit display, but drawing that remote image taints the canvas. Encoding with toBlob() or toDataURL() then throws a SecurityError. Changing a client-side cropper setting cannot grant permission to read remote pixels.
| Value | Request behaviour |
|---|---|
true or 'anonymous' | CORS mode; cross-origin credentials are omitted. |
'use-credentials' | CORS with credentials; the server must allow the exact requesting origin and credentials. |
false | Ordinary image loading without a CORS request; remote pixel export is unavailable. |
Crop on your server
If your server owns the cropping step, you can disable client canvas export and display the remote image without CORS:
<Cropper {src} canvas={false} crossOrigin={false} />Both settings matter: disabling canvas does not change the image request. Send the coordinates and transforms along with an image identifier your backend can resolve. The backend still needs permission to obtain the image; it should reproduce the coordinate space used by the cropper.
Configure the image response
For anonymous requests, return Access-Control-Allow-Origin with the permitted origin, or * when public access is appropriate. Credentialed requests need an exact origin and Access-Control-Allow-Credentials: true. If responses vary by origin, include Vary: Origin so caches keep them separate.
Check the actual image response, including redirects and cached responses. Loading the same URL elsewhere without CORS can complicate cache behaviour. If you cannot configure the image host, use a controlled same-origin image endpoint or server-side cropping.
Custom backgrounds must forward crossOrigin to their source image as well as registering the drawable source. The same configuration is available on CropperPreview and the image building blocks.