js怎么让图片上显示文字居中显示

在JavaScript中，可以通过多种方式让图片上显示居中的文字。 其中一种常见的方法是结合HTML、CSS和JavaScript来实现。我们可以利用CSS的定位属性和Flexbox布局方式，以及JavaScript来动态控制图片和文字的显示效果。以下是详细的实现方法。

使用HTML、CSS和JavaScript实现图片上文字居中显示

一、HTML结构设置

首先，我们需要设置基本的HTML结构，这里包含一个容器(div)，一张图片和一个用于显示文字的div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image with Centered Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="Sample Image">
        <div class="centered-text">Your Text Here</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式设置

为了让文字在图片上居中显示，我们需要使用CSS来进行定位和布局。可以使用Flexbox布局方式来实现。

/* styles.css */
.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {
    width: 100%;
    height: auto;
}
.centered-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

在以上CSS中，.image-container 设置为相对定位，这样其子元素 .centered-text 可以使用绝对定位来居中。我们通过设置 top: 50% 和 left: 50%，再配合 transform: translate(-50%, -50%) 来实现文字在图片上的绝对居中显示。

三、JavaScript动态控制

如果需要通过JavaScript动态地改变文字内容或者图片的显示效果，可以使用以下的代码示例：

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const centeredText = document.querySelector('.centered-text');
    const imageContainer = document.querySelector('.image-container');
    // 动态修改文字内容
    centeredText.textContent = 'New Dynamic Text';
    // 动态修改图片
    const newImageUrl = 'new-image.jpg';
    imageContainer.querySelector('img').src = newImageUrl;
});

四、扩展功能

1、动态更换背景和文字颜色

有时候，我们可能需要根据图片背景的颜色来动态调整文字的颜色，以确保可读性。以下是一个简单的例子：

// script.js
function getAverageRGB(imgEl) {
    var blockSize = 5, // 取样间隔
        defaultRGB = {r:0,g:0,b:0}, // 默认颜色
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;
    if (!context) {
        return defaultRGB;
    }
    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
    context.drawImage(imgEl, 0, 0);
    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        return defaultRGB;
    }
    length = data.data.length;
    while ( (i += blockSize * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }
    // 取平均值
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);
    return rgb;
}
document.addEventListener('DOMContentLoaded', () => {
    const imgEl = document.querySelector('.image-container img');
    const centeredText = document.querySelector('.centered-text');
    imgEl.onload = () => {
        const avgColor = getAverageRGB(imgEl);
        const textColor = (avgColor.r + avgColor.g + avgColor.b) / 3 > 128 ? 'black' : 'white';
        centeredText.style.color = textColor;
    };
});

2、使用Flexbox实现布局

如果不想使用绝对定位，也可以使用Flexbox来实现文字居中：

/* styles.css */
.image-container {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.image-container img {
    width: 100%;
    height: auto;
}
.centered-text {
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

以上就是通过HTML、CSS和JavaScript实现图片上文字居中显示的方法。从基础的定位方法到更高级的动态调整文字颜色的方法，确保了在各种不同的使用场景下都能实现良好的效果。这不仅提升了网页的视觉效果，也增加了用户体验的友好性。