请问vue或者uniapp如何实现背景色自动根据图片的主色进行渲染？

Question

请问如何实现背景色自动根据图片的主色进行渲染？

Answer 1

把图片绘制到一个与图片大小相等的 canvas 上，然后在图片上取样，确定图片的主色，把这个色值作为背景色即可。

const picUrl = __YOUR_PIC_URL__;
const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');
const image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
canvas.setAttribute('crossOrigin', 'anonymous');

image.addEventListener('load', e => {
    // image.removeEventListener('load', function(){});
    console.log('image.width:', image.width);
    const WIDTH = image.width;
    const HEIGHT = image.height;
    canvas.height = HEIGHT;
    canvas.width = WIDTH;
    ctx.drawImage(image, 0, 0, WIDTH, HEIGHT);
    const imageData = ctx.getImageData(0, 0, WIDTH, HEIGHT).data;
    
    // 这里为了简便，采用数组缓存颜色平均值
    // 如果需要进一步提高性能的话，可以使用 ArrayBuffer
    let colorArray = [
        imageData[0],  // red 通道
        imageData[1],  // green 通道
        imageData[2],  // blue 通道
        imageData[3]  // alpha 通道
    ];
    
    // 开启透明度时，imageData 的每四个值代表一个点的 RGBA值
    for(let cnt = 4; undefined !== imageData[cnt + 3]; cnt += 16){
        colorArray[0] = ((colorArray[0] + imageData[cnt]) >> 1);
        colorArray[1] = ((colorArray[1] + imageData[cnt + 1]) >> 1);
        colorArray[2] = ((colorArray[2] + imageData[cnt + 2]) >> 1);
        colorArray[3] = ((colorArray[3] + imageData[cnt + 3]) >> 1);
    }
    document.getElementById('mainWrap').style.backgroundColor = 
      [
      'rgba(', 
      ~~colorArray[0], 
      ',', 
      ~~colorArray[1], 
      ',', 
      ~~colorArray[2], 
      ',', 
      colorArray[3] / 255, 
      ')'
    ].join('');
});
image.src = picUrl;

---

当然，如果图片不是特别花哨、要求不是特别高的话，可以将背景设为 transparent ，然后将图片设为伪元素的背景，再进行高斯模糊即可：

<div class="main-wrap">
</div>

<style>
    .main-wrap{
        background: transparent;
        position: relative;
        z-index: 1
    }
    .main-wrap::before{
        position: absolute;
        top: -100px;
        left: -100px;
        right: -100px;
        bottom: -100px;
        background: center no-repeat;
        background-size: cover;
        background-image: url(__YOUR_PIC_URL__);
        filter: blur(100px);
    }
</style>

代码没测试过，但是思路应该还算清晰，我怀疑 JS 不太可能跑得起来，需要多改进，DOM 操作最好改成 ref 引用。

---

时隔一天回来更新下，JS 代码经简单测试可用了，用例在 codepen。

Answer 2

稍微改了下代码

可是取出来的颜色对不上

Answer 3

如果是uniapp要如何实现呢

Answer 4

实现方式: https://www.yuque.com/along-n3gko/ezt5z9/yogm17