在第一次加載或用Ctrl + F5重新加載畫布上的圖像在圖形上不工作

我的問題是，圖像不是在firefox（版本34）的文檔的第一次加載畫布上繪製。它在IE中工作。在第一次加載或用Ctrl + F5重新加載畫布上的圖像在圖形上不工作

我創建了一個最小示例頁面來說明我的問題。您應該可以通過使用代碼創建HTML文件來重現，使用任何png文件並在Firefox中加載文件。寬度和高度是我的圖片的寬度和高度，只是使用您的圖片大小。

我在畫布之前添加了img標籤，以便在執行javascript代碼之前加載圖像。但是如果在第一次加載之後再次按下F5，畫布只會繪製圖像。按下Ctrl + F5，圖像消失。 F5又回來了......你得到了照片。如果緩存被清空，繪圖不起作用。

有誰知道我是否可以阻止這在Firefox中（因爲它在IE中工作，沒有測試鉻）？繪畫之前我忽視了一些我應該做的事情嗎？
也許我做錯了什麼？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <img src="ball.png"/> 
    <canvas id="canvas" height="100" width="100"></canvas> 
    <script> 
     var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
     var internal_image = new Image(); 
     internal_image.src = "ball.png"; 
     internal_image.width = 18; 
     internal_image.height = 19; 
     context.drawImage(internal_image, 10, 10); 
    </script> 
</body>

這僅是爲了說明一個文件樣品。其實我使用jQuery和代碼在

$（文件）。就緒

功能執行。

來源

2014-12-06 Uwe

嘗試在圖像的load函數內調用drawImage函數以確保圖像在嘗試繪製之前實際加載。

var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
var internal_image = new Image(); 
internal_image.src = "ball.png"; 
internal_image.width = 18; 
internal_image.height = 19; 

internal_image.addEventListener("load", function() { 
    context.drawImage(internal_image, 10, 10); 
}, false);

來源

2014-12-06 18:22:04

這是行得通的。你碰巧知道爲什麼原始代碼在Firefox中不起作用，但在IE中？ – Uwe 2014-12-06 18:45:02

最有可能是運行在IE中:)在調用'.drawImage（）'之前，最有可能的是圖像被加載了，這也解釋了爲什麼它也可以從緩存中使用FF。 – 2014-12-07 11:08:15

在第一次加載或用Ctrl + F5重新加載畫布上的圖像在圖形上不工作

回答

相關問題