Содержание
Существует множество утилит, которые вы можете создать, если сможете извлечь цвет из одного пикселя холста, интерактивного средства выбора цвета и т. Д. Эту задачу относительно легко выполнить с помощью чистого JavaScript без какой-либо библиотеки.
Чтобы извлечь цвет из пикселя определенного холста, мы собираемся:
- Получить местоположение события мыши.
- Используйте координаты, чтобы выбрать данные на холсте.
- Используйте данные RGBA пикселя.
Давайте начнем !
Получение местоположения мыши по событию
Поскольку существует множество возможных ошибок и действий, которые может сделать пользователь, мы должны быть максимально точными, поэтому, чтобы гарантировать, что координаты мыши надежны, мы собираемся извлечь их в соответствии с расположением холста.
Используйте следующую функцию, чтобы получить местоположение элемента (в данном случае холст), он ожидает элемент DOM в качестве первого параметра. Однако эта функция будет внутренне использоваться функцией, которая собирается получить местоположение щелчка.
/**
* Return the location of the element (x,y) being relative to the document.
*
* @param {Element} obj Element to be located
*/
function getElementPosition(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}Предыдущий метод возвращает местоположение (объект с координатами x и y) элемента, заданного в качестве первого параметра (холст в этом случае) в документ.
Теперь, когда мы можем получить местоположение холста, следующий метод будет заботиться о расположении клика. на холсте (или другое событие мыши, прикрепленное к холсту):
/**
* return the location of the click (or another mouse event) relative to the given element (to increase accuracy).
* @param {DOM Object} element A dom element (button,canvas,input etc)
* @param {DOM Event} event An event generate by an event listener.
*/
function getEventLocation(element,event){
// Relies on the getElementPosition function.
var pos = getElementPosition(element);
return {
x: (event.pageX - pos.x),
y: (event.pageY - pos.y)
};
}Метод getEventLocation возвращает координаты (x, y) в соответствии с событием мыши (щелчок, перемещение мыши и т. Д.), Даже если пользователь увеличивает масштаб документа при использовании getElementPosition увеличивает точность getEventLocation функция.
Нарисуйте изображение на холсте (цель тестирования)
В этой статье предполагается, что вы знаете, как нарисовать изображение на холсте, или у вас уже есть что-то нарисованное с использованием контуров, и поэтому вы хотите получить цвет из пикселя и т. Д. Однако, если у вас ничего нет, вы можете использовать следующую функцию Чтобы нарисовать изображение (из base64 или интернет-ссылки) на холсте:
var canvas = document.getElementById("canvas");
/**
* Draw an image (from your own domain or base64)
* @param {String} sourceurl
*/
function drawImageFromWebUrl(sourceurl){
var img = new Image();
img.addEventListener("load", function () {
// The image can be drawn from any source, the canvas will be filled with the image.
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
});
img.setAttribute("src", sourceurl);
}Замечания : Вы можете нарисовать любое изображение, если хотите, однако, если изображение не предоставлено с вашего собственного домена (yourdomain.com, а изображение взято с otherdomain.com), тогда вы столкнетесь с проблемой с ошибкой Tainted Canvas, подробнее об этой проблеме читайте здесь. Поэтому в нашем примере мы собираемся использовать строку base64 вместо веб-изображения.
Получение данных пикселей в соответствии с местоположением
Теперь, чтобы получить цвет из пикселя, мы собираемся использовать метод getImageData из контекста холста, и мы собираемся ограничить его 1 пикселем (x1, y1) в соответствии с местоположением щелчка (или любого события мыши). что вы хотите) событие.
В следующем фрагменте показано, как получить цвет из пикселя в событии щелчка на холсте:
Замечания: вместо этого вы можете использовать прослушиватель событий jQuery, если хотите, только указывайте переменную события.
var canvas = document.getElementById("canvas");
canvas.addEventListener("click",function(event){
// Get the coordinates of the click
var eventLocation = getEventLocation(this,event);
// Get the data of the pixel according to the location generate by the getEventLocation function
var context = this.getContext('2d');
var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data;
// If transparency on the pixel , array = [0,0,0,0]
if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
// Do something if the pixel is transparent
}
// Convert it to HEX if you want using the rgbToHex method.
// var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
},false); pixelData является UInt8ClampedArray с 4 предметами ([0] => red, [1] => green, [2] => blue, [3] => alpha (transparency)).
То есть манипулируй цветом как хочешь и используй его как хочешь. Вы даже можете преобразовать RGBA в HEX цвет, используя следующий метод:
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}Поиграйте со следующей скрипкой с приведенным выше кодом. Прикрепленный пример нарисует изображение base64 на холсте, а затем слушатель mousemove будет прикреплен к нему, перейдите на вкладку «Результат» и протестируйте его.
Повеселись
