图像绘制到画布有时不显示任何内容

我努力学习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_的例子，所以我不能赞扬它。我只是想切换它，所以你可以选择一个本地文件，而不仅仅是在服务器上使用硬编码的图像文件。 :)无论如何，我做了你的改变，现在它像一个冠军。我从未想过要检查实际图像的加载情况。非常感谢！ –

图像绘制到画布有时不显示任何内容

回答

相关问题