JP2*_*P2K 10 html javascript embed proxy html5-canvas
所以基本上我在这里所做的就是进行嵌入，将其复制到画布上，然后尝试将所述复制的背景更改为透明。它确实可以工作，但由于 net:ERR_FAILED 200 而无法在浏览器中工作。
CORS 策略已阻止从源“null”访问“https://clearoutside.com/forecast_image_small/50.70/-3.52/forecast.png”处的图像：不存在“Access-Control-Allow-Origin”标头所请求的资源。
有办法解决这个问题吗？
<!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>
因此，也许我自己的服务器负责下载图像，但是我不知道如何设置类似的东西，因为我对编码非常陌生。