主页 / 问题 / 737859
Accepted
GOGANOID _
Asked:2020-10-30 20:26:12 +0000 UTC2020-10-30 20:26:12 +0000 UTC

如何在不使用画布的情况下获取像素的颜色？

  • 772

有这样的代码。

#photo{
    position: absolute;
    width: 100px;
    height: 100px;
}
#wrapper{
    position: relative;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

<div id=wrapper>
    <img src="image.jpg" alt="" id="photo">
</div>

如何找出可见像素的颜色？

php

1 个回答

  1. Best Answer

    如果canvas无法使用，那么唯一可能的解决方案是使用AJAX向服务器发出请求。服务端有和客户端一模一样的图片，或者图片是随请求一起发给它的。服务器从请求中通过 X 和 Y 坐标查找像素的颜色，并以 JSON 格式返回其颜色。

    PHP服务器代码：

    <?php
    header("Content-Type: application/json; charset=UTF-8");
    $x = $_GET["x"];
    $y = $_GET["y"];

    //Загрузка JPG-изображения из файла "image.jpg"
    $image = imagecreatefromjpeg("image.jpg");
    //Возвращаем цвет пикселя с координатами ($x, $y) на изображении $image
    $color = imagecolorat($image, $x, $y);
    //Получаем составляющие цвета (red, green, blue)
    $col = new stdClass();
    $col->r = ($color >> 16) & 0xFF;
    $col->g = ($color >> 8) & 0xFF;
    $col->b = $color & 0xFF;

    //Выводим JSON для AJAX-запрса:
    echo json_encode($col);

    //Освобождаем память сервера
    imageDestroy($image);
?>

    客户端代码：

    <html><body style="margin:0;padding:0">
<img src="image.jpg"><!-- картинка на сервере и клиенте одна -->
<br>
<div id="mouse-position"></div>
<div id="color"></div>

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
    if(this.readyState == 4 && this.status == 200)
    {
        var color = JSON.parse(this.responseText);
        document.getElementById('color').innerHTML = color.r + ', ' + color.g + ', ' + color.b;
    }
};

function sendAJAX(x, y)
{
    xmlhttp.open('GET', 'getColorRGB.php?x='+x+'&y='+y, true);
    xmlhttp.send();
}

document.querySelector('img').onclick = function(e)
{
    document.getElementById('mouse-position').innerHTML = 'x = ' + e.pageX + ', y = ' + e.pageY;
    sendAJAX(e.pageX, e.pageY)
};
</script>
</body></html>

    注意这里指示的内容<body style="margin:0;padding:0">，使图片显示在左上角，没有缩进。这样做是为了使图片与文档的坐标对齐，因为e.pageX它们e.pageY显示的是文档的坐标。一般来说，这里如果图片发生偏移，仍然需要正确传输坐标。但是对于这个例子，它是多余的。

    • 2

相关问题