[6.x] Image brightness detection

[jaygeorge]

Description of the Problem

As discussed in #13927, transparent assets can be primarily light or dark.

Under certain conditions, it can be difficult to discern an image against a checkerboard background—for example, when the logo is white or black.

What this PR Does

• Instead of trying to pick a light or dark checkerboard, this PR detects if an image/SVG is predominantly dark or light by sampling pixels using built-in browser APIs (Canvas 2D + Image). This is computed server-side on upload using Intervention Image (works with both GD and Imagick drivers) and stored in the asset's .meta/*.yaml file alongside existing metadata like width, height, and duration.
• Rounded the corners of the checkerbox background slightly while I was here, I think it looks prettier.
• Closes Checkerboard background in asset editor should always be dark #13927

(Updated since initial PR):

• Light/Dark badge for the image shows on the editor now
  
• Remove checkerboard on hover, now that we're typically using a toggle button to show transparency
  
• Added a "show transparency" button for asset field modals too

• Add some fallbacks for understanding whether SVGs are light or dark
  • when the Imagick branch finds zero non-transparent pixels (meaning it couldn't meaningfully rasterize the SVG), it now falls through to the XML color-parsing fallback instead of returning null. Same for when Imagick throws an exception.

How it works

• On upload (single, bulk, reupload, CLI), the image is scaled to 64px and sampled for average luminance. The result (light or dark) is written to meta as tone.
• SVG tone detection uses native Imagick (when the PHP extension is available) with a transparent background, so it measures actual content rather than a white canvas. If Imagick isn't installed, SVGs get tone: null.
• No extra endpoints, no browser-side processing, no JS compilation required -- it piggybacks on the existing generateMeta() pipeline.

Exposed to developers in Antlers templates

• {{ tone }} -- returns light, dark, or null
• {{ is_light_tone }} / {{ is_dark_tone }} -- boolean helpers

Works the same way as focus_css and other meta-driven asset values.

Before

(and you'd have a similar problem if you had a dark logo with a dark checkerboard background)

After

White and black logos are now much easier to discern:

(ignore the aspect ratio issue here, that's an existing issue that I'll fix separately)

How to Reproduce

1. Go to /cp/assets and upload a transparent white or black logo

[godismyjudge95]

It might be worthwhile looking into calculating this upon upload and stored in the meta vs on the fly in browser.
I could also see this being useful to expose to devs similar to the focus_css meta for dynamic frontend rendering.

It could be something as simple as:

use Intervention\Image\ImageManagerStatic as Image;

$image = Image::make($path)->resize(1, 1, function ($constraint) {
    $constraint->aspectRatio();
});
$averageColor = $image->pickColor(0, 0); // [R, G, B, A]

// Normalized to 0-1
$meanR = $averageColor[0] / 255;
$meanG = $averageColor[1] / 255;
$meanB = $averageColor[2] / 255;

$luminance = (0.2126 * $meanR) + (0.7152 * $meanG) + (0.0722 * $meanB);
$isBright = $luminance > 0.5;

(not tested AI generated - but looks correct)

[daun]

The brightness/luminance would indeed be interesting on the frontend as well, now that everything is glass and backdrop filters :) With the additional benefit of front-loading the calculation at the time of upload.

[jaygeorge]

OK, I've given it a go! I've updated the PR description to note what's happening.

{{ asset.tone }} would output the raw value: light when the image is detected as light, dark when it’s detected as dark.

You could use it like this:

{{ if asset:tone == "light" }}
    <div class="preview preview-dark">
{{ elseif asset:tone == "dark" }}
    <div class="preview preview-light">
{{ /if }}
    <img src="{{ asset:url }}" alt="" />
</div>

Or with the booleans:

{{ if asset:is_light_tone }}
    <div class="bg-dark">…</div>
{{ elseif asset:is_dark_tone }}
    <div class="bg-light">…</div>
{{ /if }}

[daun]

This is really nice. Great solution to a tricky situation.

[jasonvarga]

Did you push up the antlers stuff? I don't see anything.

[jaygeorge]

I added some more things while I was playing:

• Light/Dark badge for the image shows on the editor now
  
• Remove checkerboard on hover for the asset fieldtype, now that we're typically using a toggle button to show transparency
  
• Added a "show transparency" button for asset field modals too

• Add some fallbacks for understanding whether SVGs are light or dark
  • when the Imagick branch finds zero non-transparent pixels (meaning it couldn't meaningfully rasterize the SVG), it now falls through to the XML color-parsing fallback instead of returning null. Same for when Imagick throws an exception.

[jaygeorge]

@jasonvarga the Antlers syntax should "just work" because we're referencing saved meta data.

Here's some Antlers and the browser rendering it in the background: