相关疑难解决方法(0)

有没有办法将二维十六进制代码数组转换为 png 图像？

数组看起来像这样（只是大得多）

[
  [
    '#FF0000',
    '#00FF00'
  ],
  [
    '#0000FF',
    '#000000'
  ]
]

从这个数组，图像应该是这样的

如果该方法不适用于这样的数组，那么它将使用什么类型的数组？

我有这样的图像:

并且喜欢找图像(在特定的颜色#ffa400/ #ffffff),并得到他们的百分比出现值(橙色也许:75%白色:25%)

注意:请记住,我不喜欢像Color Thief那样获得平均颜色(在这种情况下:橙色),但我想找到一种SPECIFIC颜色.

下面是一个片段,所以这就是我到目前为止所做的一切,但代码似乎不起作用,我的想法似乎也不是一种有效而快速的方法.

function extract_colors(img) {
    var canvas = document.createElement("canvas");
    var c = canvas.getContext('2d');
    c.width = canvas.width = img.width;
    c.height = canvas.height = img.height;
    c.clearRect(0, 0, c.width, c.height);
    c.drawImage(img, 0, 0, img.width, img.height);
    return getColors(c);

}

function getColors(c) {
    var col, colors = {};
    var pixels, r, g, b, a;
    r = g = b = a = 0;
    pixels = c.getImageData(0, 0, c.width, …

我正在绘制一幅未被清除的画布,并使其随着时间的推移逐渐消失为纯色,或者在显示背后层的alpha中消失.

我的第一直觉是简单地在图纸上填充一个矩形,每个框架都有一个低的alpha,这样填充颜色就会逐渐淡出画面.

但我发现了一些奇怪的行为(至少对我而言,我确信这是有原因的).填充颜​​色永远不会完全累积.结果的变化取决于油漆和填充颜色相互之间的颜色更浅/更暗.

我发现这个问题,有人和我一样:绘制画布后淡出线条？

最佳答案看起来不错,而且和我试过的一样.但它只适用于白色的黑色.这是同一个不同颜色的小提琴的另一个版本,你会看到绘画永远不会消失,它会留下一个幽灵:http://jsfiddle.net/R4V97/92/

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0;

canvas.width = canvas.height = 600;

canvas.onmousedown = function (e) {
    if (!painting) {
        painting = true;
    } else {
        painting = false;
    }

    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function (e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        ctx.strokeStyle = "rgba(255,255,255,1)"; …

我有一个颜色选择器,用户可以指定一个十六进制颜色.

我还想要一个饱和度滑块,用户可以调整饱和度,并将新的十六进制颜色作为输出.

有没有办法在JavaScript中将饱和度值和十六进制颜色转换为新的十六进制颜色？

所以,例如,我有一个值#FF0000和饱和度50(满分100)我如何从中确定新的十六进制颜色？

我不能使用任何库,因为我正在创建它作为我的网站的插件,我试图尽可能保持它.

我希望尽可能精确地对齐以下颜色数组.

搜索并尝试在Stackoverflow上建议的许多解决方案后,pusher.color库具有最佳解决方案,但是,它也远非完美.我想听听我们如何完美地对齐它们的解决方案.

JSFIDDLE链接:http://jsfiddle.net/dxux7y3e/

码:

var coloursArray=['#FFE9E9','#B85958','#FFB1AE','#FFC2BF','#C55E58','#FFC7C4','#FF9A94','#FF9D96','#FA9790','#A78B88','#A78B88','#CE675B','#DB8073','#FF9D90','#FF7361','#FFD6D1','#F9A092','#FF7B67','#EBACA2','#FF806D','#DD6D5B','#D16654','#ED8673','#FFC4B8','#E2725B','#ED7A64','#8F3926','#BD492F','#9D3C27','#AD533E','#BF4024','#FFC9BC','#6B6766','#E1CDC8','#C2654C','#B3978F','#FFC7B8','#CE2B00','#C2654C','#A24D34','#FF926D','#E78667','#FFB198','#8C756D','#9E6D5B','#FFC7B0','#FFBEA4','#D2B9AF','#FFB193','#632710','#B26746','#976854','#F44900','#E79873','#EFA27F','#532510','#BC866B','#FDE5D9','#FF5B00','#D18C67','#FF5B00','#9E4312','#763713','#BB6B39','#B5622E','#CC7742','#6D4227','#B56B38','#FF7518','#F3B080','#995C30','#995C30','#FF6A00','#D89769','#71472A','#EDAC7B','#EEAB79','#EBCFB9','#FBE3D1','#E19255','#5E381B','#FFDCC1','#FFF0E4','#F68D39','#7B5B40','#FF8313','#FFCEA4','#AA8667','#975414','#CB9867','#8C5B2B','#FFCE9E','#7B4714','#FFF3E7','#FFA449','#CEAF90','#CDB69E','#EFD6BC','#DDA66B','#B27737','#B88A57','#CE9B61','#F4C38B','#543817','#BC9C78','#DBB07A','#FF8E04','#F6EADB','#DBC2A4','#C49B64','#CBA26B','#80551E','#FF9200','#FFECD3','#FFC87C','#FFB755','#DBB680','#D2D0CD','#EFDBBE','#E5C18B','#FFE5BC','#F2EADB','#885F12','#FFE7B6','#825A08','#906712','#F2D18E','#C8C6C2','#FFB000','#FFC243','#C6BEAD','#D0C3A4','#916800','#8C6700','#F4E9CA','#FFF0C5','#FFE080','#FFEBA8','#846600','#FFE692','#F5F0DB','#433F2F','#BBB394','#FFEFAA','#FFE76D','#FFFAE0','#3E3B28','#554900','#E1E0D8','#74725C','#605F54','#F8F7DD','#A5A467','#DDDDDA','#FFFFEE','#A3A39D','#E0E0D7','#BEBEB9','#E8E8E5','#454531','#ACACAA','#E9E9DF','#FFFFDC','#EBEBE7','#979831','#C5C6BE','#B9C866','#898D72','#F3FAD1','#616452','#CED5B0','#A1A787','#595C4E','#B0BB8C','#EEFFB6','#ACB78E','#8FA359','#858F6C','#86916E','#374912','#AEB0AA','#79904C','#627739','#747F60','#9FA98E','#E7F9CB','#E1F9BE','#495637','#8A9978','#4E5F39','#86996E','#C3CEB7','#78866B','#CEDDC1','#B5CEA2','#536149','#D6E6CC','#D6E6CC','#809873','#4F564C','#4F6C45','#555F52','#4F7942','#5F705B','#D0DFCD','#2B3929','#F0F7EF','#AAD5A4','#99BC95','#B6D4B4','#869E86','#618661','#006700','#E9EEE9','#739E73','#005B06','#EDF7EE','#D0E0D2','#809784','#ABCEB1','#C0E0C8','#3A5241','#435549','#E6ECE8','#E3EAE6','#3B604C','#00602F','#92B7A5','#2F5B49','#318061','#30745B','#316955','#00A275','#C2D1CE','#80A7A0','#00A082','#C2D1CF','#5C6E6C','#607473','#EDF7F7','#1E8285','#D5E7E8','#AADEE1','#188086','#107F87','#566364','#007B86','#66949A','#CAE2E5','#18656F','#004F61','#0C5B6C','#668E98','#BBD0DA','#91B4C5','#AFC3CD','#738A99','#3A5467','#476174','#244967','#556C80','#667A8C','#516D87','#1E4263','#7C8791','#849CB6','#738CAA','#1E3A5F','#1E3655','#9EB0CE','#B6BAC2','#67738D','#BEC1CD','#555559','#616180','#000049','#000031','#F8F8FC','#938BA4','#47375D','#F7F6F8','#3D0067','#514C53','#9566A2','#7F5482','#A279A4','#6D1261','#A06492','#925582','#945B80','#CE94BA','#ECCFE1','#A20058','#A6005B','#BC0061','#BB0061','#F3CEE1','#B3005B','#AB165F','#8A184D','#AA185B','#F3DAE4','#DB3779','#E71261','#E74F86','#FFD6E5','#BE9BA7','#D0396A','#DB1855','#F798B6','#9C294A','#D62B5B','#DE3969','#BC1641','#E7547A','#D52756','#9C7D85','#DB244F','#A1354F','#C22443','#FFBDCA','#8B6D73','#DC3D5B','#FF738C','#F13154','#BC4055','#FED4DB','#FFCFD6','#CB4E61','#ED455A','#F36C7B','#C94F5B','#F3959D','#A8444C','#FFCCD0','#735B5D','#D15D67','#B44B52','#FD868D','#FFD5D8','#C3767B','#FF8087','#C8242B','#FFEAEB','#F95A61','#E96D73','#E6656B','#FF6D73','#FF555B','#A35A5B','#FFD3D4','#B84B4D'];
        var body=document.getElementsByTagName('body')[0];

        function hexToRgb(hex) {
            hex = hex.substring(1, hex.length);
            var r = parseInt((hex).substring(0, 2), 16);
            var g = parseInt((hex).substring(2, 4), 16);
            var b = parseInt((hex).substring(4, 6), 16);

            return r + "," + g + "," + b;
        }

        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }

        var rgbArr=new Array();
        var div=document.createElement('div');
        div.id='Original';

        body.appendChild(div);
        for(var color in …

试图通过单击来更改单元格的颜色。

单元格通常是灰色的，第一次点击它们应该变成红色。当我单击红色单元格时，它应该再次变为灰色。

function changeColor(cell) {
  var red = '#FE2E2E';
  var grey = '#E6E6E6';

  if (cell.style.backgroundColor == grey) {
    cell.style.backgroundColor = red;
  } else {
    if (cell.style.backgroundColor == red) {
      cell.style.backgroundColor = grey;
    }
  };
};

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}

<table class="table table-bordered" id="table">
  <tbody>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

我也试过用.style.bgColor，rgb并if (cell.style.backgroundColor ===但这也不能工作。单元格背景颜色的值是 …

以下代码可以在所有浏览器中完美运行,禁止IE浏览器.照常.这是需要发生的事情:

1. 将鼠标悬停在链接上时,获取该链接颜色.
2. 获取该颜色的RGB值,因为基本CSS将始终设置为HEX值;
3. 使用新的RGB值并进行计算以确定该颜色的较浅色调
4. 在0.5秒的时间内为新的较浅色调制作动画
5. 将鼠标移开时,将颜色恢复为原始值

正如我所说,到目前为止代码工作得非常好,除了在IE中.任何有新鲜眼睛(和完整的发际线)的人都可以看看这个吗？可以做到与众不同吗？

function getRGB(color) {
    // Function used to determine the RGB colour value that was passed as HEX
    var result;

    // Look for rgb(num,num,num)
    if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

    // Look for rgb(num%,num%,num%)
    if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];

    // Look for #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];

    // Look for #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return …

我有两种颜色的十六进制形式,#000000和#ffffff.我想以百分比的方式将第一种颜色逼近第二种颜色.就像是:

var percent=0.50;
var color1='#000000';
var color2='#ffffff';

var newcolor=approximateColor1ToColor2ByPercent(color1,color2,percent);
//newcolor should be a gray like #808080

这该怎么做？

我是一名网页设计师。

当我浏览网站时，我喜欢更改一些颜色，并查看更改主颜色时网站的外观。

我使用“检查元素”来做到这一点。但这是非常耗时的工作，因为我需要添加大量代码来更改各处。

是否有任何 JavaScript 代码可以使用浏览器控制台将一种颜色代码更改为另一种颜色代码。

基本上我想要的是像下面这样的......

使用浏览器控制台将此站点中所有位置的 #FFF8DC 颜色更改为 #e6dfc6 颜色。

这是我的代码如下.我试图扭转已经发出的点击.这是用td标签发生的.我在这里和其他论坛上结合了几个问题的失败实验.

function changeColor(elem) {
    if (elem.style.backgroundColor = "#5AD9C1" || "transparent") {
        elem.style.backgroundColor = "#66FF66";
    } else if (element.style.backgroundColor = "#66FF66") {
        elem.style.backgroundColor = "#5AD9C1";
    }
};

我正在尝试在 vue 中的 div 上应用背景颜色，并且我能够从我的数据中传入一个 hex_code，但我想对rgba背景应用样式。我的语法有问题吗？

      <div
        v-for="item in itemList"
        :style="{ 'background-color': `rgba(${ item.hex_code }, 0.5)` }"
        :key="item.id">
     </div>

我在网站上有很多颜色,我想用usercript更改.想象一下包含1000个不同选择器的CSS文件,每个选择器都有一个颜色.那种特定的颜色是我想要改变的.该颜色的每个实例.用户必须能够动态更改颜色(如使用输入框)​​,因此使用CSS文件更改它将不起作用.

如果它有效,那么我将如何做到这一点:

$("*").replace("#00aba0","#FF0000");

00aba0是我要用FF0000替换的颜色

不幸的是,该方法不可用,但它可以像这样工作.另外,设置一个循环来做string.replace(); 不会起作用,因为它是一个论坛,当你做出新的回复时,它会删除回复框中的文字.

总结一下:

我想用另一种颜色替换颜色的每个实例.有许多实例(比方说500)这种颜色,必须改变.我无法通过替换CSS文件来更改它,并且必须动态更改它.