Как по клику узнать цвет пикселя в градиенте?

Question

[sergey19940808]

Есть блок див залитый градиентом.

<div className='gradient-picker__container'>
</div>

.gradient-picker__container {
    width: 400px;
    height: 300px;
    background: linear-gradient(to bottom left, #FF6347, #B8860B);
}

Как по клику узнать цвет пикселя js ? Либо как-то еще

Comments

[Антон Спирин]

Если вместо градиента использовать canvas то можно.

Answer 1

[Александр]

Можно сделать скриншот страницы браузера (некоторые браузеры этом умеют) например с помощью такого , поместить изображение в canvas, и взять цвет пикселя например так ( вырезка кода из ответа на этот вопрос)

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; // Get colour
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

Answer 2

[Александр Алексеев]

в фаерфоксе есть встроеный инструмент - меню интсрументы - веб разработка - пипетка
для хрома есть плагины например colorzilla

Answer 3

[eternalfire]

https://habr.com/post/147032/