3

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

Для этого я использую 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 искажаются.

4
  • 1
    вопрос полезный ...удалять незя....
    – user33274
    28 мая 2018 в 11:42
  • я не вижу никаких отличий)
    – Dmytro
    28 мая 2018 в 15:08
  • Если бы вы выложили свой код сюда, а не на jsfiddle.net, то вам бы уже давно помогли. Многие не переходят по таким ссылкам так как jsfiddle.net распространяет вирусы. По крайней мере sitecheck.sucuri.net так говорит. Лично я не хожу по таким ссылкам.
    – Bharatha
    31 мая 2018 в 6:25
  • что у Canvas, что у image цвет один и тот же - RGB(36,43,51). 31 мая 2018 в 16:06

1 ответ 1

3

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

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)`;
});
<div style="width: 100%; background: rgb(36,43,51);">
  <div style="margin:auto; width: 50%;">
    <canvas id="canvas_id" width="300" height="300" style="border: 1px solid red"></canvas>

    <div id="color_div" style="width:200px; height:200px;">color</div>
  </div>
</div>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.