Javascript Canvas и CSS цвета

#javascript #css #canvas #цвета

На сайте мне необходима функция цветовой пипетки,
то есть возможность скопировать цвет пикселя, который находится под курсором.

Для этого я использую canvas и функцию ctx.getImageData и получаю массив с нужными
цветами rgba.

С помощью этого массива можно повторить цвет, в рамках самого Canvas, 
но если попытаться применить этот цвет на стили CSS, то цвет будет другой.

Как я понимаю, между цветовой схемой Canvas и CSS существуют различия.
Как построить JavaScript-функцию, которая бы устраняла эти различия?

UPD: я создал небольшой пример.

Там можно увидеть три элемента — широкий div, с цветом rgb(36,43,51),
внутри которого находится элемент Canvas, на котором размещено изображение, состоящее
из фона такого же цвета и белой полосы слева,
и ниже него элемент img с тем же содержимым. 

Вы не увидите разницы между цветами div и img, потому что они одни и те же. 

Но изображение, отображаемое внутри Canvas имеет совсем другой цвет и заметно выделяется
на общем фоне.

Как я понимаю, использование функции ctx.getImageData показывает правильные цвета
и для CSS, и для Canvas, но проблема в том, что все цвета внутри тега canvas искажаются.
    

Ответы

Ответ 1

Цветовые схемы не должны отличаться, если вы все делаете верно, приведу рабочий пример:



let canvas = document.getElementById('canvas_id'),
  ctx = canvas.getContext('2d'),
  base_image = new Image();
//Изображение в base64 чтобы небыло ошибок с cross origin при вызове getImageData
base_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEVCAYAAAAWzhetAAAHKUlEQVR4nO3Yz3EcSB2G4Z/Xg2u5cCMJNgmSIB4gHYiCIJYQfKCwyusZeTx/NOKAiIDq6vK7z6Py/evq1rzWvHudeZ2qP739i/p7+Gw/z8xfd49Y6s8z89PuEWv86/cz//jj7hXr/GVm/rl7xDp/2z1goT/Mz/NT+PJ+2D0AAPj/CToABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABBwuuxes9JiZ++4R69zDl/eye8ByL5N9nLd7+3G+7h6wVvRVzszMbW5zCZ/w8Gn3gpVuM/N194h1voYvL5yDN5fJPs6nY/txPnYPWCv6Kmdm5pf5ZT6FT+grdwAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACDgcdy9Y6Tozp90j1jmFL++8e8By58k+ztOH9uN82T1greirnJmZ05zmGD7hoXu06Qc9fDZB/46dPrQfp6B/t05vP1W+cgeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgIDDx90LVnqZmevuEetcw5d32z1gudtkH+fxuf04H7sHrBV9lTMz83k+z8fwCf2FDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYfL7gUr3WcmfMBL+Gy33QOWu032cV4+tB/nY/eAtcI3N5e3n6rD0+4FK51nJnzAp/DZvuwesNyXyT7O4639OO+7B6wVvrn5cZ7mx/AJfeUOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABgg4AAYIOAAGCDgABh+PuBSvdZ+a8e8Q65/DlXXcPWO462cd5et9+nI/dA9aKvsqZmXme5zmGT9gP+rfdI9b5Fr68X0fQo4/z+Yf244wHPfoqZ+Z/Qe+e0FfuABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQcPi0e8FK55l52j1inafw5R13D1juODPvd49Y4/ky8/S73SvWue0esFb4I3Pez9O8D5/wcN29YKWXSf/y3cKXF762N7fJnvJ6bT/O190D1oq+ypmZuc51ruET+sodAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACBB0AAgQdAAIEHQACDh93L1jpZWYuu0escwlf3m33gOVuk32c10f7cT52D1gr+ipnZubzPM8tfEJ/oQNAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQICgA0CAoANAgKADQMDhuHvBSteZOe0esc7pt7sXrHPePWC582T/P337zczpsHvFOi+7B6wV/sicxzzPY77unrHMoXx5gv79+rZ7wHLnmXndPWKNq6B/z8IfmfOY53kNBz36JwIA/LoIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAECDoABAg6AAQIOgAEHP69e8FKl5n5snvEOl/e7V6wzn33gOW+zsx194g17oeZ5/ANvuwesFb4I3Ouc5nzfNs9Y5lD9CPlvx6TLsM9fHnxz8xJn/D+2n6cr7sHrBX+yJzrXOdd+IS+cgeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgABBB4AAQQeAAEEHgID/AHRqDt5smHseAAAAAElFTkSuQmCC";
base_image.onload = () => {
canvas.width = base_image.width;
canvas.height = base_image.height;
ctx.drawImage(base_image, 0, 0);
}


//При наведении мышки на канвас будем менять цвет у DIV блока
canvas.addEventListener('mousemove', event => {

  let x = event.pageX - canvas.offsetLeft,
    y = event.pageY - canvas.offsetTop,
    imgData = ctx.getImageData(x, y, 1, 1).data;


  document.querySelector('#color_div').style.backgroundColor = `rgba(${imgData[0]},
${imgData[1]}, ${imgData[2]}, 1)`;
});

  

    

    
color
  





Все ровно так, как вы и описывали, в момент наведения мышки мы высчитываем ее x\y
координаты относительно canvas, далее получаем по этим координатам imageData и получаем
4 значения соответствующих red,green,blue,aplha.