In my case, crossorigin props may lead normal image within canvas into error.
It seems like that it's not problem with Canvas, but Image DOM api?
Minimum React Demo like this:
useEffect(() => {
const image = new Image();
image.width = 100;
image.height = 100;
// when you add this line, the image will load failed
// errorMessage: [blocked] The page at ${pageUrl} requested insecure content from ${requestUrl} This content was blocked and must be served over HTTPS.
image.crossOrigin = 'anonymous';
image.src = 'http://some_http_image';
image.onload = () => {
const conatiner = document.getElementById('container');
conatiner.appendChild(image);
};
}, []);
return (
<div>
<div id="container"></div>
</div>
);
As webkit change in iOS18 mentioned, webkit implemented W3C standard about mixed content. Maybe this change leads to some error.
Use https image resources to replace http ones, or delete crossorigin modify could fix it.
