# 文字颜色自适应背景图片 - 利用canvas获取图片像素矩阵 ```js const image = new Image(); image.src = require('./assets/img/bg13.png'); const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); image.onload = () => { context.drawImage(image, 0, 0); //获取像素矩阵 const data = context.getImageData(0, 0, canvas.width, canvas.height).data; } ``` - 根据像素计算主色调 1. 取平均数方式,优点是简单,缺点是可能不太准 ```js let sr = 0, sg = 0, sb = 0, sum = 0; const data = context.getImageData(0, 0, canvas.width, canvas.height).data; for (let i = 0; i < data.length; i += 4) { if (data[i + 3] >= 255) { sum++; sr += data[i]; sg += data[i + 1]; sb += data[i + 2]; } } const r = sr / sum, g = sg / sum, b = sb / sum; ``` 2. 中位数方式 ```js ``` - 判断颜色色系 ( 深色系OR浅色系 ),给页面body添加样式 ```js const level = 0.299 * r + 0.587 * g + 0.114 * b; if (level < 192) { document.getElementsByTagName("body")[0].className = 'style-dark'; } else { document.getElementsByTagName("body")[0].className = 'style-wihte'; } ``` - CSS样式 ```css .style-dark .el-table *, .style-dark .el-tabs *, .style-dark .el-input__inner, .style-dark h1, .style-dark h2, .style-dark small, .style-dark span, .style-dark div *{ color: white; } .style-dark .el-input__inner * { background: none !important; } .style-dark .el-button--default { background: url(assets/img/bg13.png); } .style-dark .el-dialog *{ color: white !important; } ```