Get Hex Value From Farbtastic and convert to RGB for use in imagefilter in php

Question

I've got a working jquery code snippet that gets the hex value of my color picker farbtastic just fine. Problem I am having is taking that and applying it as a tint with paintbrushjs. The Hex just does not transfer over to the id of the image and does not update the data-tint-pb-colour option. So I am possibly looking at a php option but would like input first on a possible fix as I've worked on this 3 days now and unable to get it to work.

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"/>

I've basically hit a wall. Not sure how to make this work. fiddle.

You don't need to duplicate your `$(document.ready(){...})`. Also, you forgot the hash symbol (#) in `$('#filter-tint').attr('data-pb-tint-colour',color)`. Now, you will see your attribute changes. However, the paintbrush still does not seem to work. Why? I'm not sure. Perhaps because `Firefox / Chrome only work when files exist on a web server.` You can find this message at their [github repo](https://github.com/mezzoblue/PaintbrushJS) — actaram, Jul 27 '15 at 16:25
@BishopBarber, I have tested this on a codeanywhere devbox and I am still not having any luck getting it to tint with paintbrushjs. Do you have any other suggestions for tinting a image with Jquery? — , Jul 27 '15 at 21:22
@BishopBarber also to note when I put a hex value in data-pb-tint-colour manually it tints it. But updating it via the color picker does not work. — , Jul 27 '15 at 21:25

score 0 · Accepted Answer · edited May 23 '17 at 11:43

If you don't mind not using PaintbrushJS, I found this answer which proposes to overlay a semitransparent div over your image. So basically, you set the div's dimensions and position equal to the image's dimensions and position. Then you set its background-color. Since you want the color to be transparent, you want to set a rgba value to the background-color. However, farbtastic returns a hex color, so you have to convert it to a rgba value.

First add the div:

<div id="overlay" class="overlay"></div>

The class overlay would have the following css at load:

.overlay
{
    display: block;
    position: absolute;
}

Then add the following code:

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

So if you used PaintbrushJS only for the color tint, I suggest you simply do the above, because it's lighter, and because PaintbrushJS seems to have some problems.

JSFiddle example

This will work perfect, my only concern is addressing the alphas so it doesn't tint over them. Other then that this will work great. — , Jul 27 '15 at 23:31
@CrazyCoder I'm sorry, I'm not sure I understand what you mean. Could you elaborate? — actaram, Jul 27 '15 at 23:35
Well right now it applies it as a over lay and covers the whole image, my PNG's have alpha backgrounds and I want to color only the image if possible not the background. I hope that makes sense. — , Jul 27 '15 at 23:36
@CrazyCoder Yes, it makes sense, but I'm not really sure that's possible. Even with PaintbrushJS, it tints your whole image. You can't really tint only the non-background part of your image. At least, not that I know how. Good luck though! — actaram, Jul 27 '15 at 23:41

Get Hex Value From Farbtastic and convert to RGB for use in imagefilter in php

JAVASCRIPT/JQUERY

HTML

1 Answers1