It is currently impossible to use the image data due to CORS settings. To fix this, the server must be configured with the Access-Control-Allow-Origin: * header.
Sample code:
(async function f() {
let img = new Image();
img.crossOrigin = 'anonymous'; // allow non-authenticated downloading of the image cross-origin
img.src = 'https://i.waifu.pics/YY~unmW.jpg'; // failed with error "CORS Missing Allow Origin"
await img.decode();
let bitmap = await createImageBitmap(img);
let canvas = document.createElement('canvas');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(bitmap, 0, 0);
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData);
})();
It is currently impossible to use the image data due to CORS settings. To fix this, the server must be configured with the
Access-Control-Allow-Origin: *
header.Sample code: