Javascript 从Farbtastic获取十六进制值并转换为RGB，以便在php的imagefilter中使用

我有一个工作的jquery代码片段，它可以很好地获取颜色选择器farbtastic的十六进制值。我遇到的问题是把它作为一种颜料涂在画笔上。十六进制不会转换到图像的id，也不会更新数据着色pb颜色选项。因此，我可能在寻找一个php选项，但想输入一个可能的修复第一，因为我已经在这3天的工作，现在无法让它工作

JAVASCRIPT/JQUERY HTML

颜色：

我基本上撞到墙了。我不知道该怎么做。

---

如果您不介意不使用PaintbrushJS，我发现它建议在您的图像上覆盖一个半透明的div。因此，基本上，可以将div的尺寸和位置设置为图像的尺寸和位置。然后设置它的背景色。由于希望颜色是透明的，因此需要将

rgba

值设置为背景色。但是，farbtastic返回十六进制颜色，因此必须将其转换为

rgba

值

首先添加div：

类覆盖将在加载时具有以下css：

.overlay
{
显示：块；
位置：绝对位置；
}

然后添加以下代码：

$（文档）.ready（函数（）{
$（“#picker”）.farbtastic（“#color”）；
var$picker=$.farbtastic（“#picker”）；
SetTintColor（$（“#color”）.val（）；//也在加载时设置色调
$picker.linkTo（函数（hexColor）{
SetTintColor（hexColor）；
});
});
函数SetTintColor（hexColor）{
变量$filterImage=$（“#过滤器色调”）；
var$overlay=$（“#overlay”）；
//将div的尺寸和位置设置为图像的尺寸和位置
$overlay.css({
“高度”：$filterImage.height（），
“宽度”：$filterImage.width（），
“top”：$filterImage.offset（）.top+“px”，
“左”：$filterImage.offset（）.left+“px”
});
//farbtastic插件返回一个十六进制颜色，但我们希望将rgba设置为div的背景色，
//因此它可以是透明的。
var rgb=六角体GB（六角体颜色）；
var opacity=0.5；//这可以更改为动态值
//连接rgb的值+不透明度以获得表示rgba的字符串
var rgbaColor=“rgba（“+rgb.r+”、“+rgb.g+”、“+rgb.b+”、“+opacity+”）；
$overlay.css（“背景色”，rgbaColor）；
//更改颜色输入的背景色
var$colorInput=$（“#颜色”）；
$colorInput.val（hexColor）；
$colorInput.css（“背景色”，hexColor）；
}
//取自https://stackoverflow.com/a/5624139/2835243
函数hexToRgb（hex）{
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（十六进制）；
返回结果{
r:parseInt（结果[1]，16），
g:parseInt（结果[2]，16），
b:parseInt（结果[3]，16）
}：null；
}

因此，如果您仅在颜色着色时使用PaintbrushJS，我建议您简单地执行上述操作，因为它更轻，而且PaintbrushJS似乎存在一些问题

---

如果您不介意不使用PaintbrushJS，我发现它建议在您的图像上覆盖一个半透明的div。因此，基本上，可以将div的尺寸和位置设置为图像的尺寸和位置。然后设置它的背景色。由于希望颜色是透明的，因此需要将

rgba

值设置为背景色。但是，farbtastic返回十六进制颜色，因此必须将其转换为

rgba

值

首先添加div：

类覆盖将在加载时具有以下css：

.overlay
{
显示：块；
位置：绝对位置；
}

然后添加以下代码：

$（文档）.ready（函数（）{
$（“#picker”）.farbtastic（“#color”）；
var$picker=$.farbtastic（“#picker”）；
SetTintColor（$（“#color”）.val（）；//也在加载时设置色调
$picker.linkTo（函数（hexColor）{
SetTintColor（hexColor）；
});
});
函数SetTintColor（hexColor）{
变量$filterImage=$（“#过滤器色调”）；
var$overlay=$（“#overlay”）；
//将div的尺寸和位置设置为图像的尺寸和位置
$overlay.css({
“高度”：$filterImage.height（），
“宽度”：$filterImage.width（），
“top”：$filterImage.offset（）.top+“px”，
“左”：$filterImage.offset（）.left+“px”
});
//farbtastic插件返回一个十六进制颜色，但我们希望将rgba设置为div的背景色，
//因此它可以是透明的。
var rgb=六角体GB（六角体颜色）；
var opacity=0.5；//这可以更改为动态值
//连接rgb的值+不透明度以获得表示rgba的字符串
var rgbaColor=“rgba（“+rgb.r+”、“+rgb.g+”、“+rgb.b+”、“+opacity+”）；
$overlay.css（“背景色”，rgbaColor）；
//更改颜色输入的背景色
var$colorInput=$（“#颜色”）；
$colorInput.val（hexColor）；
$colorInput.css（“背景色”，hexColor）；
}
//取自https://stackoverflow.com/a/5624139/2835243
函数hexToRgb（hex）{
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（十六进制）；
返回结果{
r:parseInt（结果[1]，16），
g:parseInt（结果[2]，16），
b:parseInt（结果[3]，16）
}：null；
}

因此，如果您仅在颜色着色时使用PaintbrushJS，我建议您简单地执行上述操作，因为它更轻，而且PaintbrushJS似乎存在一些问题

---

您不需要复制

$（document.ready（）{…}）

。另外，您忘记了

$（“#过滤器色调”）中的散列符号（#）。attr（'data-pb-tint-color'，color）

。现在，您将看到属性更改。然而，画笔似乎仍然不起作用。为什么？我不确定。可能是因为

Firefox/Chrome仅在web服务器上存在文件时才起作用。

您可以找到以下消息

$(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
  });
     $(document).ready(function() {
        var picker = $.farbtastic('#picker');
        picker.linkTo(function onColorChange(color) {
        $('filter-tint').attr('data-pb-tint-colour',color)
        console.log(color, "hello world!");
        });
     });

<form action="" style="width: 400px;">
  <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
 <img id="filter-tint" class="filter-tint" src="http://preview.88kcikfcuw4mfgvi8ckrxvjrndu6jemi01t025rhda6skyb9.box.codeanywhere.com/images/Layer2.png" data-pb-tint-opacity="0" data-pb-tint-colour="#ffffff"/>