Add colour overlay to non transparent part of a PNG - php

Question

I am trying to accomplish having a colour wheel and it will add an overlay to a PNG image with a 50% opacity so you can still see the outlines of the image behind.
I have tried using intervention fill methods and changing it on a per-pixel basis.
private function colorImage($url, $r = null, $g = null, $b = null) {
$im = imagecreatefrompng($url);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);
if (imageistruecolor($im)) {
$sx = imagesx($im);
$sy = imagesy($im);
for ($x = 0; $x < $sx; $x++) {
for ($y = 0; $y < $sy; $y++) {
$c = imagecolorat($im, $x, $y);
$a = $c & 0xFF000000;
$newColor = $a | $r << 16 | $g << 8 | $b;
imagesetpixel($im, $x, $y, $newColor);
}
}
}
ob_start();
imagepng($im);
imagedestroy($im);
$image_data = ob_get_contents();
ob_end_clean();
$image_data_base64 = "data:image/png;base64," . base64_encode($image_data);
return $image_data_base64;
}
Before: https://imgur.com/v1xRixQ
Current: https://imgur.com/67M9iCg
Objective: https://imgur.com/RxzaxTP

Answer 1

You can use the Intervention Image image library to do this.
Create an instance that is an image filled with your semi-transparent RGB color, mask it off using the source image, and lay the mask on top of the original as an overlay.
use Intervention\Image\ImageManager;
// setup
$red = 255;
$green = 0;
$blue = 0;
$opacity = 0.25;
$manager = new ImageManager(['driver' => 'gd']);
// the source image
$image = $manager->make('./board.png');
// the fill color
$fill = $manager->canvas(
$image->width(),
$image->height(),
[$red, $green, $blue, $opacity]
);
// use the source image to mask off only the portion of the fill that will be
// used as the overlay
$fill->mask($image, true);
// apply the semi-transparent, masked fill to the source image
$image->insert($fill);
// render as a png
header('Content-Type: image/png');
echo $image->encode('png');
Output: https://imgur.com/oIRP8Ir