繪制圖像后獲取畫布數據有問題

Question

此代碼可以正常運行：

 <script type="text/javascript">

var canvas = document.createElement("canvas");
    canvas.id = "myCanvas";
    canvas.style.height = "640px";
    canvas.style.width = "384px";
    canvas.style.position = "absolute";
    canvas.style.border = "1px solid black";

    document.body.appendChild(canvas);
var context = canvas.getContext('2d');


function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

 canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    var imgd = context.getImageData(mousePos.x, mousePos.y, 1, 1);
    var pix = imgd.data;

    document.getElementById("listener").innerHTML = "<b><i>" + message + "<br>" + pix[3] + "</i></b>";
  }, false);
</script>

<div id="listener" >
</div>

它基本上將鼠標位置寫入“偵聽器” div和當前像素的Alpha（只要沒有內容，它當然是-0）

但是當我添加以下代碼時：

var img = new Image();
img.src = 'http://www.animefighters.de/images/armor_leatherbelly.png';
context.drawImage(img, 0, 0);

什么都不會發生...我在做什么錯？ 錯誤在哪里？ 我想在畫布上繪制一些圖像，然后獲取像素數據（包括鼠標位置和像素的Alpha）...我如何實現這一點？

Answer 1

您試圖在加載之前在畫布上繪制圖像，需要在加載時繪制它：

var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
}
img.src = 'http://www.animefighters.de/images/armor_leatherbelly.png';