圖像繪製到畫布有時不顯示任何內容

我努力學習Canvas和正在運行到一個奇怪的故障，我想不通，雖然我敢肯定，這只是一些愚蠢的事我俯瞰。基本上，我有一個頁面，您可以選擇一個本地圖像文件。然後將它繪製到已調整大小以適合圖像的畫布上，並且當您將鼠標移動到圖像上時，它將顯示光標的座標並顯示一些指示線。圖像繪製到畫布有時不顯示任何內容

該頁面是here。

我遇到的問題是，當你選擇一個文件，它會隨機調整畫布爲0x0，並從該點向前無論你選擇它會保持在該尺寸什麼的圖像文件。如果刷新頁面並選擇導致上次問題的相同圖像文件，則該頁面可能正常工作並顯示（或者可能不會）。

我不認爲這是一個瀏覽器緩存的問題，因爲我已經看到了這一點，我選擇File1和它工作得很好，選擇文件2，它能正常工作，然後再選擇File1和它打破了。另外，如果我正確理解它，那麼將FileReader的事件處理程序設置爲onloadend應該避免它在嘗試在完全讀取圖像之前繪製圖像的任何問題。

這裏是我的代碼（我敢肯定有這樣做的更簡潔的方法，但我還在學習）。任何幫助將不勝感激。

的index.html

<!DOCTYPE html> 
<head> 
    <title>Image Coordinates Inspector</title> 
    <style> 
     body { 
      background: #4a4a4a; 
      color: #fdcd00; 
     } 
     #canvas { 
      margin-left: 15px; 
      background: #ffffff; 
      border: thin inset rgba(100, 150, 230, 0.5); 
      cursor: crosshair; 
      display: none; 
     } 
     #coordinates { 
      margin-left: 15px; 
     } 
     #fileselect { 
      margin-left: 10px; 
     } 
    </style> 
    <script language="JavaScript" type="text/javascript" src="imgcoords.js"></script> 
</head> 
<body onload="initializePage()"> 
    <div id='fileselect'> 
     <form> 
      <input id="filename" name="filename" type="file" accept="image/*"> 
     </form> 
    </div> 
    <div id='coordinates'></div> 
    <canvas id='canvas'> 
     Canvas not supported. 
    </canvas> 
</body> 
</html>

imgcoords.js

var canvas, 
    coordinates, 
    filename, 
    context, 
    img = new Image(), 
    coordevent = false; 

function initializePage() { 
    canvas = document.getElementById('canvas'); 
    coordinates = document.getElementById('coordinates'); 
    filename = document.getElementById('filename'); 
    context = canvas.getContext('2d'); 

    filename.onchange = function(e) { 
     validateFile(); 
     e.preventDefault(); 
    }; 
} 

function validateFile() { 
    if (filename.value != '' && filename.files[0].type.match(/image.*/)) { 
     var file = filename.files[0], 
      reader = new FileReader(); 

     canvas.style.display = "none"; 
     reader.readAsDataURL(file); 
     reader.onloadend = function(e) { 
      img.src = e.target.result; 
      resizeCanvas(); 
      drawImageFile(); 
     }; 
    } else { 
     canvas.style.display = "none"; 
     alert("Selected file is not a valid image file."); 
    } 
} 

function resizeCanvas() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
} 

function windowToCanvas(canvas, x, y) { 
    var bbox = canvas.getBoundingClientRect(); 

    return { x: (x - bbox.left) * (canvas.width/bbox.width), 
      y: (y - bbox.top) * (canvas.height/bbox.height) 
    }; 
} 

function clearCanvas() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

function drawImageFile() { 
    clearCanvas(); 
    context.drawImage(img, 0, 0); 

    if (!coordevent) { 
     canvas.onmousemove = function(e) { 
      var loc = windowToCanvas(canvas, e.clientX, e.clientY); 

      drawImageFile(); 
      drawGuidelines(loc.x, loc.y); 
      updateCoordinates(loc.x, loc.y); 
     }; 
     coordevent = true; 
    } 

    updateCoordinates(0, 0); 
    canvas.style.display = "inline"; 
} 

function drawGuidelines(x, y) { 
    context.strokeStyle = 'rgba(0, 0, 230, 0.8)'; 
    context.lineWidth = 0.5; 
    drawVerticalLine(x); 
    drawHorizontalLine(y); 
} 

function updateCoordinates(x, y) { 
    coordinates.innerHTML = '(' + x.toFixed(0) + ', ' + y.toFixed(0) + ')'; 
} 

function drawHorizontalLine(y) { 
    context.beginPath(); 
    context.moveTo(0, y + 0.5); 
    context.lineTo(context.canvas.width, y + 0.5); 
    context.stroke(); 
} 

function drawVerticalLine(x) { 
    context.beginPath(); 
    context.moveTo(x + 0.5, 0); 
    context.lineTo(x + 0.5, context.canvas.height); 
    context.stroke(); 
}

來源

2013-06-19 Greg Hanson

BTW，尼斯測量工具，你已經到了那裏！

更改此：

reader.onloadend = function(e) { 
    img.src = e.target.result; 
    resizeCanvas(); 
    drawImageFile(); 
};

爲了這一點 - 爲了給它的img需要加載時間：

reader.onloadend = function(e) { 
    img.onload=function(){ 
     resizeCanvas(); 
     drawImageFile(); 
    } 
    img.src = e.target.result; 
};

此外，還有就是你可能要一個新的Chrome漏洞避免像這樣：

// img = new Image() is buggy in Chrome 
img = document.createElement("img"),

來源

2013-06-19 18:25:12 markE

感謝您的讚揚，但它實際上是一本書_Core HTML5 Canvas_的例子，所以我不能讚揚它。我只是想切換它，所以你可以選擇一個本地文件，而不僅僅是在服務器上使用硬編碼的圖像文件。 :)無論如何，我做了你的改變，現在它像一個冠軍。我從未想過要檢查實際圖像的加載情況。非常感謝！ –

圖像繪製到畫布有時不顯示任何內容

回答

相關問題