So basically what im doing here is taking an embed, duplicating it to a canvas and then trying to change the background of said duplication transparent. It does work, however not in the browser due to net:ERR_FAILED 200.
Access to image at 'https://clearoutside.com/forecast_image_small/50.70/-3.52/forecast.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Any way to get around that?
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta nameset="viewport" content="with=device-width, initial-scale=1.0">
<title>ClearOutside</title>
<style type="text/css">
body {
background-color: transparent;
-ms-zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
</style>
</head>
<body style="background-color:Blue">
<a href="https://clearoutside.com/forecast/50.70/-3.52">
<img id="forecast" crossorigin="anonymous" src="https://clearoutside.com/forecast_image_small/50.70/-3.52/forecast.png" /></a>
<canvas id="myCanvas" width="505" height="41">
<script>
document.getElementById("forecast").onload = function(_) {
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
const image = document.getElementById("forecast");
context.drawImage(image, 0, 0);
const WHITE = 0xFF;
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const {
data
} = imageData;
for (let i = 0; i < data.length; i += 4) {
if (
WHITE === data[i] &&
WHITE === data[i + 1] &&
WHITE === data[i + 2]
) {
data[i + 3] = 0x00;
}
}
context.putImageData(imageData, 0, 0);
};
</script>
</body>
</html>
So perhaps have my own server be responsible for downloading the image, however i have no clue how to set something like that up as im pretty fresh to coding.