Escribí esta inserción aquí que toma la información meteorológica del sitio especificado como una inserción, luego la duplica con la esperanza de cambiar el canal alfa del color blanco a transparente. Parece que no puedo llegar a una conclusión. El problema es que la aplicación meteorológica se actualiza cada 1 o 2 segundos. Así que también necesitaría un bucle SI puedo hacer que el fondo sea transparente, con lo que aún no he tenido suerte.
<!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/37.61/15.10"> <img id="forecast" src="https://clearoutside.com/forecast_image_small/33.07/-106.02/forecast.png" /></a> <canvas id="myCanvas" width="505" height="41"> <script> document.getElementById("forecast").onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("forecast"); ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(0, 0, c.width, c.height); }; </script> </body> </html>¡Cualquier ayuda sería muy apreciada!