https://www.cristintierney.com/lib/g/2.0/scripts/artlogic_modules/…=dac33a5&g=9596173b8ecdfbd478b6469aebfffc4f

1const calculate_average_rgb = (image_data) => {
2    const { length } = image_data.data;
3    const rgb = { r: 0, g: 0, b: 0 };
4    const chunk_size = 200;
5
6    let count = 0;
7    for (
8        let i = 0;
9        i < length && (i + chunk_size + 2) <= length;
10        i += chunk_size, ++count
11    ) {
12        rgb.r += image_data.data[i];
13        rgb.g += image_data.data[i + 1];
14        rgb.b += image_data.data[i + 2];
15    }
16
17    rgb.r = ~~(rgb.r / count);
18    rgb.g = ~~(rgb.g / count);
19    rgb.b = ~~(rgb.b / count);
20
21    return rgb;
22};
23
24const get_average_color_for_full_image = (image) => {
25    const canvas = new OffscreenCanvas(image.naturalWidth, image.naturalHeight);
26    const context = canvas.getContext('2d');
27    context.drawImage(image, 0, 0);
28
29    const data = context.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
30    return calculate_average_rgb(data);
31}
32
33const get_average_color_for_area_behind_overlay = (image, overlay) => {
34    const { offsetWidth: width, offsetHeight: height, offsetLeft, offsetTop } = overlay;
35    const canvas = new OffscreenCanvas(width, height);
36    
37    const size_multiplier = image.naturalWidth / image.width;
38    const context = canvas.getContext('2d');
39    
40    context.drawImage(
41        image,
42        offsetLeft * size_multiplier,
43        offsetTop * size_multiplier,
44        width * size_multiplier,
45        height * size_multiplier,
46        0, 
47        0,
48        width,
49        height,
50    );
51    
52    const data = context.getImageData(0, 0, width, height);
53    return calculate_average_rgb(data);
54};
55
56const get_overlay_color_class = ({ r, g, b }) => {
57    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
58    return luminance > 0.6 ? 'image-overlay-dark' : 'image-overlay-light';
59};
60
61const image_brightness = (container_selector, text_overlay_selector, use_full_image = false) => {
62    const elements = document.querySelectorAll(container_selector);
63
64    elements.forEach((element) => {
65        const overlay = element.querySelector(text_overlay_selector);
66        const image = element.querySelector('img');
67        
68        if (!overlay || !image) {
69            return;
70        }
71        
72        image.crossOrigin = 'Anonymous';
73        $(element).on('change.lazyload-complete', () => {
74            const rgb = use_full_image ? get_average_color_for_full_image(image)
75                : get_average_color_for_area_behind_overlay(image, overlay);
76
77            overlay.classList.add(get_overlay_color_class(rgb));
78        });
79    });
80};
81
82window.galleries = window.galleries || {};
83window.galleries.image_brightness = image_brightness;
84
85export default image_brightness;