Получить pixelcolor of CSS Фоновое изображение

Мне нужно получить цвет любого пикселя, в котором текущий указатель мыши находится в курсе. Я нашел несколько решений для элементов холста, но не для фонового изображения, определенного в CSS для элемента.Получить pixelcolor of CSS Фоновое изображение

Как я могу это достичь?

источник

2015-06-23 ManuKaracho

Что вы пробовали? Любой JS-код или примеры чего-то, что работает неправильно? – jwatts1980

Возможный дубликат [Как получить пиксельный x, y координатный цвет с изображения?] (Http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from -an-image) – jwatts1980

Чтобы получить значение CSS для фона, попробуйте следующее: http://stackoverflow.com/a/6338234/579148 Обратите внимание, что проблемы с совместимостью браузера со старыми версиями IE – jwatts1980

Объединяя ответы от Get a CSS value with JavaScript и How to get a pixel's x,y coordinate color from an image?, я был в состоянии имитировать то, что вы ищете: JSFiddle

<html> 
<head> 
    <style type="text/css"> 
     #test { 
      background-image: url('http://jsfiddle.net/img/logo.png'); 
      background-color: blue; 
      background-repeat: no-repeat; 
      height: 30px; 
      width: 100%; 
     } 

     #hidden { 
      display: none; 
     } 
    </style> 
    <script type="text/javascript"> 
     var div = document.getElementById("test"); 
     var style = window.getComputedStyle(div); 

     div.onmousemove = function(e) { 
      var path = style.getPropertyValue('background-image'); 
      path = path.substring(4, path.length-1); 

      var img = document.getElementById("i1"); 
      img.src = path; 

      var canvas = document.getElementById("c1"); 
      canvas.width = img.width; 
      canvas.height = img.height; 
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 

      var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

      var values = document.getElementById("values"); 
      values.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]; 
     }; 
    </script> 
</head> 
<body> 
    <div id="test"></div> 
    <div id="hidden"> 
     <img id="i1" src="" /> 
     <canvas id="c1"></canvas> 
    </div> 
    <div id="values"></div> 
</body> 
</html>

Я извлек вычисляемый стиль (var style = window.getComputedStyle(div);) за пределами функции перемещения мыши для увеличения производительности, но если фоновое изображение будет динамически изменяться, его, возможно, необходимо будет перенести в функцию.

Для использования getComputedStyle существует possible browser constraints.

SCALING Вы можете попробовать редактирования кода для корректировки шкалы:

var h = parseInt(style.getPropertyValue("width")), 
    w = parseInt(style.getPropertyValue("height")); 

var img = document.getElementById("i1"); 
img.src = path; 

var canvas = document.getElementById("c1"); 
canvas.width = h; 
canvas.height = w; 
canvas.getContext('2d').drawImage(img, 0, 0, w, h);

Это также включает в себя изменения в CSS: JSFiddle

источник

2015-06-23 16:58:38 jwatts1980

это замечательно! Я использую изображения в качестве фоновых изображений из-за преимуществ масштабирования различных изображений до размера моего предварительного просмотра div (фиксированный размер). Когда изображение становится масштабированным, ваш подход не работает должным образом. Я попытался переместить вычисляемый стиль в функцию перемещения мыши, но мне не повезло .. у вас есть какой-то намек в правильном направлении для меня? – ManuKaracho

@ user2556555 Я сделал редактирование, которое объясняет некоторое масштабирование. Вы можете попробовать. – jwatts1980

Получить pixelcolor of CSS Фоновое изображение

ответ

Смежные вопросы