Fatal编程技术网
  • html/
  • Html 为什么我的画布getImageData没有'；不行？

Html 为什么我的画布getImageData没有'；不行？

html image canvas colors

Html 为什么我的画布getImageData没有'；不行？,html,image,canvas,colors,pixel,Html,Image,Canvas,Colors,Pixel,我正在尝试使用以下简单代码从图像像素中提取颜色： <body> <img src="image.png" id="monImage"/> <canvas id="myCanvas"></canvas> <script src="jquery.js"></script> <script> $(function() { var img = $('

我正在尝试使用以下简单代码从图像像素中提取颜色：

<body>
    <img src="image.png" id="monImage"/>
    <canvas id="myCanvas"></canvas>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            var img = $('#monImage')[0];
            var canvas = $('#myCanvas')[0];
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

            var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1);

            alert("test");
        });
    </script>
</body>
然后，
alert（）
在我的屏幕上工作并显示。但如果我不发表评论，那就不行了，所以这句话就行不通了。为什么?

谢谢

在函数执行时，图像尚未加载完毕（图像数据不可用）

但是，image元素是有效的，因此您可以读取其属性。这就是为什么它以前没有失败，但是它的
width
和
height
属性将为0

有点令人惊讶的是，您可以使用
drawImage
执行该行。但是，在到达
getImageData
时，没有要检索的数据，因此它将失败

您需要将代码放入窗口
load
事件处理程序中，或者向image元素添加事件侦听器

例如：

window.onload = function() {

    /// your function goes here

}

window.onload = function() {

    /// your function goes here

}