根据inner-div中图片的主题设置阴影颜色

Question

有没有办法根据div内图像的主题/颜色设置div的阴影颜色？

例如，如果使用汽车在林道上行驶的图像，则应根据图像的颜色设置阴影颜色。

我还没有尝试过任何东西，但我愿意接受建议。创建一个函数来将图像设置为 div 的背景可能允许阴影颜色以某种方式访问它。我意识到我可能完全偏离了轨道，但我正在努力弄清楚这一点。

我正在使用 React.js 和 Tailwind CSS。

Answer 1

我建议您查看 colotheif 图书馆。

您可以使用此库从图像中获取主色，然后在盒子阴影中使用该颜色。

这是获取主色的演示： https://lokeshdhakar.com/projects/color-thief/

此外，这就是你的代码的样子，

const [dominantColor, setDominantColor] = useState(null);
const imageUrl = 'https://th.bing.com/th/id/OIG3.ROpYc8LkzQdqXyRhWJc5?pid=ImgGn';

useEffect(() => {
    const colorThief = new ColorThief();

    const fetchDominantColor = async () => {
        try {
            const response = await fetch(imageUrl);
            const blob = await response.blob();

            const img = new Image();
            img.crossOrigin = 'Anonymous';

            const imageUrlObject = URL.createObjectURL(blob);

            img.src = imageUrlObject;

            img.onload = function () {
                const color = colorThief.getColor(img);
                setDominantColor(color);
            };

            img.onerror = function (error) {
                console.error('Error loading image:', error);
            };
        } catch (error) {
            console.error('Error fetching dominant color:', error);
        }
    };

    fetchDominantColor();

    return () => {
        URL.revokeObjectURL(imageUrl);
    };
}, [imageUrl]);

...

{dominantColor && (
    <img
        className="flex justify-center items-center size-44"
        style={{
            boxShadow: `0 0 20px 20px rgba(${dominantColor.join(',')}, 0.5)`
        }}
        src={imageUrl}
        alt="Dominant Color"
        width={100}
        height={100}
    />
)}