实时变色

Question

我做了一个换色器。 但现在我想为它添加一个表格。 如果更改下拉列表，则必须直接显示颜色更改。 做这个的最好方式是什么？

下面我添加了换色器的代码

 $im = b.gif;
    $index = imagecolorclosest ( $im,  128,128,128); // old color
    imagecolorset($im,$index,$color[0],$color[1],$color[2]); // new color

    $imgname = "result.gif";
    imagegif($im, $imgname ); // save image as gif
    imagedestroy($im);

Answer 1

如果您不想使用<input type="color" /> ，则可以使用3 <input type="range">为它们添加更改侦听器，并在更改其中一个元素时更新您希望的元素样式。 （本次活动change将触发你释放输入后，事件input ，每当值改变会触发，即使你仍然保持输入）。 我使用Object.defineProperty进行着色获取和设置，以便更容易测试。

 ["red", "green", "blue", "opacity"].forEach(function(colorType) { Object.defineProperty(this, colorType, { get: function() { return +document.querySelector("#" + colorType).value; } }); document.querySelector("#" + colorType).addEventListener("input", onChange); }); Object.defineProperty(this, "result", { set: function(newColor) { document.querySelector("#result").setAttribute("style", "background-color: rgba(" + newColor + ");"); } }); onChange(); function onChange() { result = [red, green, blue, opacity].join(", "); } 

 #result { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 <form id="result"> <input type="range" id="red" name="red" min="0" max="255" /> <input type="range" id="green" name="green" min="0" max="255" /> <input type="range" id="blue" name="blue" min="0" max="255" /> <input type="range" id="opacity" name="opacity" min="0" max="1" step="0.01" /> </form> 

 Object.defineProperty(this, "color", { get: function() { return document.querySelector("#color").value; } }); document.querySelector("#color").addEventListener("input", onChange); Object.defineProperty(this, "result", { set: function(newColor) { document.querySelector("#result").setAttribute("style", "background-color: " + newColor + ";"); } }); onChange(); function onChange() { result = color; } 

 #result { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 <form id="result"> <input type="color" id="color" name="color" /> </form>