我有一个工作的jquery代码片段,它可以获得我的颜色选择器farbtastic的十六进制值。我遇到的问题是将它作为paintbrushjs的色调应用。 Hex不会转移到图像的id,也不会更新data-tint-pb-color选项。所以我可能正在寻找一个php选项,但我希望先输入一个可能的解决方案,因为我已经在这3天工作了,但无法让它工作。
$(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"/>
我基本上是撞墙了。不知道如何使这项工作。 fiddle.
答案 0 :(得分:0)
如果您不介意不使用PaintbrushJS,我发现this answer建议在图像上叠加半透明div。所以基本上,你设置div的尺寸和位置等于图像的尺寸和位置。然后设置其背景颜色。由于您希望颜色是透明的,因此您需要将rgba
值设置为背景颜色。但是,farbtastic返回十六进制颜色,因此您必须将其转换为rgba
值。
首先添加div:
<div id="overlay" class="overlay"></div>
类叠加在加载时会有以下css:
.overlay
{
display: block;
position: absolute;
}
然后添加以下代码:
$(document).ready(function() {
$('#picker').farbtastic('#color');
var $picker = $.farbtastic('#picker');
SetTintColor($("#color").val()); // Set tint at load too
$picker.linkTo(function(hexColor) {
SetTintColor(hexColor);
});
});
function SetTintColor(hexColor) {
var $filterImage = $('#filter-tint');
var $overlay = $("#overlay");
// Set the div's dimensions and position equal to the image's dimensions and position
$overlay.css({
"height": $filterImage.height(),
"width": $filterImage.width(),
"top": $filterImage.offset().top + "px",
"left": $filterImage.offset().left + "px"
});
// The farbtastic plugin returns a hex color, but we want to set a rgba as the div's background-color,
// so it can be transparent.
var rgb = hexToRgb(hexColor);
var opacity = 0.5; // This can be changed for a dynamic value
// Concatenate the rgb's values + opacity to obtain a string representing the rgba
var rgbaColor = "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")";
$overlay.css("background-color", rgbaColor);
// Change the color input's background-color
var $colorInput = $("#color");
$colorInput.val(hexColor);
$colorInput.css("background-color", hexColor);
}
// Taken from https://stackoverflow.com/a/5624139/2835243
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
所以如果你只使用PaintbrushJS作为颜色色调,我建议你简单地做上面的事情,因为它更轻,因为PaintbrushJS似乎有一些问题。