Javascript設置圖像的src屬性不起作用

我正在研究一些需要天氣模型圖像並測試像素顏色的代碼。在這裏我的整個代碼：Javascript設置圖像的src屬性不起作用

<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>

出於某種原因，是應該被顯示在畫布上的圖像顯示不出來。任何人都可以告訴我爲什麼，以及我如何修復它？我想要的解決方案只涉及HTML或Javascript，因爲我是初學者。

來源

2016-01-16 Philadelphia Regional Weather

'setTimeout（2000）;'什麼都不做。簽名是'setTimeout（functionToCall，毫秒）'。它對你給它的函數建立一個異步調用，稍後X毫秒（大約）。無論這是否與我不知道的形象有關，它只是跳到我身上。 –

你可以做一個這樣的小提琴或鋼筆嗎？關於超時，我猜你正在做這個圖像加載。使用回調來檢查圖像是否加載更安全。 – vandijkstef

「currentRun」計算是否正確？使用你的算法（'currentRun == 18'）我得到一個'404'錯誤。如果我使用之前的值（'currentRun == 12'），則會有圖像。 – Andreas

您需要等待圖像加載才能訪問它。

// 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!"); 
}

來源

2016-01-16 21:06:08 Blindman67

謝謝，您的解決方案已運行！ –

Javascript設置圖像的src屬性不起作用

回答

相關問題