个人中心
gpt4 book ai didi

Javascript 设置图像的 src 属性不起作用

转载 作者：可可西里 更新时间：2023-11-01 13:27:52 27 4
gpt4 key购买 nike

我正在编写一些获取天气模型图像并测试像素颜色的代码。这是我的全部代码:

<html>

<head>
    <meta title="PRWW PreCast (v0.1)">
    <meta charset="UTF-8"> 
</head>

<body>

    <canvas id="canvas" width="1024px" height="764px">

        <img id="map" src=""/>

    </canvas>

    <script>

        //Time Variables
        var currentYear = new Date().getFullYear();
        var currentMonth = new Date().getMonth() + 1;
        var currentDay = new Date().getDate();
        var currentHour = new Date().getHours();
        var currentRun;

        //Formatting Time Variables for URLs
        if (currentMonth < 10) {
            currentMonth = "0" + currentMonth;
        }
        if (currentDay < 10) {
            currentDay = "0" + currentDay;
        }

        //Finding Latest Model Run      
        if (currentHour >= 0 && currentHour < 6) {
            currentRun = "00";
        }
        if (currentHour >= 6 && currentHour < 12) {
            currentRun = "06";
        }
        if (currentHour >= 12 && currentHour < 18) {
            currentRun = "12";
        }
        if (currentHour >= 18 && currentHour < 24) {
            currentRun = "18";
    }
    var currentRun = currentRun;

    //Creating URL
    var mapAddress = "http://www.tropicaltidbits.com/analysis/models/gfs/" + currentYear + currentMonth + currentDay + currentRun + "/gfs_mslp_pcpn_neus_" + 1 + ".png";

    //Insert Image to Document
    document.getElementById("map").setAttribute("src", mapAddress);

    setTimeout(2000);

    //Load Image and Get Image Data
    document.getElementById("canvas").getContext("2d").drawImage(document.getElementById("map"), 0, 0);
    document.getElementById("map").crossOrigin = "Anonymous";
    var pixelColor = document.getElementById("canvas").getContext("2d").getImageData(469,451,1,1).data;

    //Test Pixel Data for Color
    if (pixelColor[0] == 255 && pixelColor[1] == 255 && pixelColor[2] == 255 && pixelColor[3] == 255) {
        console.log("The code ran the 'if' part of the PixelColor if statement.");
    } else {
        console.log("The code ran the 'else' part of the pixelColor if statement.");
    }   

</script>

由于某种原因，应该显示在 Canvas 中的图像没有显示。谁能告诉我为什么，我该如何解决？因为我是初学者，所以我想要只涉及 HTML 或 Javascript 的解决方案。

最佳答案

您需要等待图片加载完毕才能访问它。

// only use one of the following two lines.
var image = new Image();
// or 
var image = document.getElementById("map");

// set the image location.
image.src = mapAddress; // setting the source does not mean the image has loaded.
image.onload = function(event){ // fires when image has loaded. this points to the image
    var c = document.createElement("canvas");  // create a canvas
    c.width = this.width;   // set its size to match the image
    c.height = this.height;
    this.ctx = c.getContext("2d");  // get the 2D context
    this.ctx.drawImage(this, 0, 0);  // draw the image onto the canvas
    try{
        var imageDat = this.ctx.getImageData(0,0,this.width,this.height);  // get the image pixel data
        // you can now access the pixel data.


    }catch(e){
        // if this runs then you can not access the image data.
        alert("Cross origin resticted access");
    }
}
image.onerror = function(event){
    // there was an error loading the image.
    alert("Image '"+this.src+"'\nFailed to load!");
}

关于Javascript 设置图像的 src 属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34830844/

27 4 0
文章推荐： c++ - 如何在 Windows 下轻松地将一个很长的字符串传递给工作进程？
文章推荐： c++ - 将 strcpy_s 用于 TCHAR 指针(Microsoft 特定)
文章推荐： c++ - 将数据作为代码执行？
文章推荐： c# - 如何在一个或多个 for 循环中使用现有变量？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com