绘制图像后获取画布数据时出现问题

Trouble with getting Canvas Data after Drawing image

本文关键字：数据 问题 图像 获取 布数据 绘制      更新时间：2023-09-26

此代码运行良好：

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

它基本上将鼠标位置写入"listener"div和当前像素的alpha（只要没有内容，它当然是0）

但当我添加这个代码时：

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

不会发生任何事情。。。我做错了什么？错误在哪里？我想在画布上绘制一些图像，然后获取像素数据（包括鼠标位置和像素的alpha）。。。我怎么能意识到这一点？

您试图在加载之前在画布上绘制图像，需要在加载时绘制：

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