所以基本上我在这里所做的就是进行嵌入,将其复制到画布上,然后尝试将所述复制的背景更改为透明。它确实可以工作,但由于 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 …Run Code Online (Sandbox Code Playgroud)