A badge editor can display an image from an asset host yet fail when it tries to export that image through a canvas. Displaying a remote picture and reading its pixels have different requirements. Adding an attribute is useful only when the host's response permits CORS access too.
Request an exportable image before assigning its URL
This integration fragment assumes an existing canvas and a remote image server configured to allow the page's origin:
const image = new Image();
image.crossOrigin = 'anonymous';
image.onload = () => {
const canvas = document.querySelector('#badge');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext('2d').drawImage(image, 0, 0);
try {
canvas.toBlob(blob => {
if (blob) console.log('PNG bytes:', blob.size);
}, 'image/png');
} catch (error) {
console.error('Export failed:', error.name);
}
};
image.onerror = () => console.error('Image load failed; inspect Network.');
image.src = 'https://assets.example.com/badge-background.png';
Replace the example host with your own permitted asset. Set crossOrigin before src so the intended mode applies when the load begins. The HTML spelling is lowercase, as in <img crossorigin="anonymous" src="...">; the JavaScript property uses a capital O.
Without suitable CORS loading, drawing a cross-origin image can taint the canvas and prevent pixel reading or export. If drawing has already tainted the canvas, changing an image attribute afterward does not repair the pixels already drawn. Reload the image with correct settings and redraw on a clean canvas. MDN cross-origin image guidance
Read the response as well as the element
For a public image requested anonymously from another origin, a response may permit all origins:
Access-Control-Allow-Origin: *
It can instead permit the specific page origin. That response header belongs to the asset server or CDN configuration. Putting it in the requesting page's HTML does not authorize the response.
Credentialed cross-origin access has stricter requirements: the allowed origin must be explicit rather than *, and the server must permit credentials. Browser cookie policies and cookie attributes still apply. use-credentials does not force a browser to send cookies that its policy blocks. Access-Control-Allow-Origin reference
Use credentialed mode only when the resource actually requires that access. For a public badge background, needing session cookies is usually a server-design question to resolve rather than a reason to add use-credentials by trial and error.
Do not equate an omitted attribute with anonymous CORS
For an ordinary image, omitting crossorigin can allow a picture to display without making its pixels available to a canvas. Adding crossorigin="anonymous" changes the request requirements, so an image that previously displayed may fail if its server does not supply a suitable CORS response.
Classic scripts, module scripts, stylesheets, and media have their own loading rules. Do not infer every resource's behavior from an image example. A font preload, for example, needs a request mode that matches font fetching; see HTML preload.
For the badge, inspect the actual image response in Network, confirm its allowed-origin policy, and then try the export in the application. The canvas toBlob guide covers the next export steps. If the console names a Content Security Policy directive instead, resolve that policy separately; CORS permission does not override the page's own loading restrictions.