JAVASCRIPT / JQUERY

Question

我有一个工作的jquery代码片段，它可以获得我的颜色选择器farbtastic的十六进制值。我遇到的问题是将它作为paintbrushjs的色调应用。 Hex不会转移到图像的id，也不会更新data-tint-pb-color选项。所以我可能正在寻找一个php选项，但我希望先输入一个可能的解决方案，因为我已经在这3天工作了，但无法让它工作。

JAVASCRIPT / JQUERY

$(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!");
        });
     });

HTML

<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.

Answer 1

如果您不介意不使用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似乎有一些问题。

JSFiddle example

从Farbtastic获取Hex值并转换为RGB以在php中的imagefilter中使用

JAVASCRIPT / JQUERY

HTML

1 个答案: