Как устранить различия между цветами Javascript canvas и css?

Question

[alekseivanov]

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

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

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

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

Comments

[iBird Rose]

можно примеры? данные которые вы получаете. и цвета и т.д.

[alekseivanov]

iBird Rose, я создал небольшой пример

https://jsfiddle.net/d3zvggaw/

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

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

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

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

[iBird Rose]

alekseivanov, окей. в ксс - это rgb(36,43,51)
а в канвас можете назвать какой это цвет?

[alekseivanov]

iBird Rose, в моём примере канвас не использует цвета, он просто отображает изображение с помощью кода

base_image = new Image();
   base_image.src = "http://p98740pz.beget.tech/color_problem/364351.png";  
   
   base_image.onload = function() {
   	    canvas.width=base_image.width;	 
   	    canvas.height=base_image.height;
        ctx.drawImage( base_image,0,0);
   };

Я изменил ссылку в примере, можете сами посмотреть

[GreatRash]

alekseivanov, ну и они одинаковые.

[alekseivanov]

GreatRash, то есть, вы в области результатов не видите различий между канвасом и фоном?

Предполагаю, искажения возникают из-за моего компьютера или монитора

[GreatRash]

alekseivanov, я вижу фиолетовый прямоугольник с белой полосой, у вас не очень удачный пример на фиддле, поэтому сложно о чём то судить.