Question

我对我的代码有疑问，我正在尝试使用网络摄像头创建动态背景，在.jquery的帮助下，该动态背景的lightIntensity为0-255，我想将其用于背景，我无法使其正常工作。

    $(document).ready(function() {
        $.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
            $('.container p').text(lightIntensity);
            console.log(lightIntensity)
        });
        function decimalToHex(lightIntensity) {
        var hex = Number(lightIntensity).toString(16);
        hex = "000000".substr(0, 6 - hex.length) + hex;
        return hex;
            document.body.style.backgroundColor = hex;
        }

    });

“ lightIntenisty”是介于0到255之间的数字，需要转换为RGB或十六进制（我认为）。

代码使用jQuery库的

jquery-1.9.1.js
jquery.image-brightness.js
jquery.webcam-light-sensor.js

<script src="https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.webcam-light-sensor.js"></script>
<script src="https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.image-brightness.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Light -> colour</title>

	<script src="js/jquery-1.9.1.js" ></script>
	<script src="js/jquery.image-brightness.js" ></script>
	<script src="js/jquery.webcam-light-sensor.js" ></script>
</head>
<body>
	<div>
		<div class="container">
			<!-- in between the <p> the 'amount' of light is displayed (0/255) -->
			<p></p>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			$.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
				$('.container p').text(lightIntensity);
				console.log(lightIntensity)
			});
			function decimalToHex(lightIntensity) {
    		var hex = Number(lightIntensity).toString(16);
    		hex = "000000".substr(0, 6 - hex.length) + hex;
    		document.body.style.backgroundColor = '#' + hex;
    		return hex;
				}
		});
	</script>
</body>
</html>

Answer 1

您要在设置backgroundColor之前返回，所以它永远不会到达。

function newColor() {
  decimalToHex(Math.floor((Math.random() * 16777215) + 1));
}

function decimalToHex(lightIntensity) {
    var hex = Number(lightIntensity).toString(16);
    hex = "000000".substr(0, 6 - hex.length) + hex;
    document.body.style.backgroundColor = '#' + hex;
    console.log(hex);
    return hex;
}

html, body {
width: 100%;
height: 100%;
}

<button onclick="newColor()">Change</button>

Answer 2

我会从https://jqueryui.com/slider/#colorpicker中获取一些代码

function hexFromRGB(r, g, b) {
  var hex = [
    r.toString( 16 ),
    g.toString( 16 ),
    b.toString( 16 )
  ];
  $.each( hex, function( nr, val ) {
    if ( val.length === 1 ) {
      hex[ nr ] = "0" + val;
    }
  });
  return hex.join( "" ).toUpperCase();
}

这当然需要红色，绿色和蓝色值。你只有1 值从0到255。因此不确定如何从中获得“颜色”。

在示例代码中也没有任何东西触发此操作。我将设置一个回调，然后根据该事件分配十六进制值。

 $.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
   $('.container p').text(lightIntensity);
   console.log(lightIntensity);
   $("body").css("background", "#" + hexFromRGB(lightIntensity, lightIntensity, lightIntensity));
 });

希望有帮助。

Answer 3

具有1值，您将不会获得丰富的色彩，但可以尝试

function decimalToHex(i) {
  var hex = i.toString(16);
  hex = hex.length == 1 ? "0" + hex : hex;
  result = '#' + hex.repeat(3);
  document.body.style.backgroundColor = result;
  return result;
}

var num = 0;

$('button').on('click', function() {
  if (num > 255) return
  result = decimalToHex(num);
  console.clear()
  console.log(num, result)
  num = num + 20;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button>
Change background
</button>

JavaScript style.background-color

3 个答案: