1. img.onload = function () {
    2.     ctx.drawImage(img, 0, 0)
    3.     img.style.display = 'none'
    4.     // 获取像素数据
    5.     let data = context.getImageData(0, 0, img.width, img.height).data
    6.     // ImageData.data 类型为Uint8ClampedArray的一维数组，每四个数组元素代表了一个像素点的RGBA信息，每个元素数值介于0~255
    7.     let r = 0,
    8.         g = 0,
    9.         b = 0
    11.     // 取所有像素平均值
    12.     for (let row = 0; row < img.height; row++) {
    13.         for (let col = 0; col < img.width; col++) {
    14.             r += data[(img.width * row + col) * 4]
    15.             g += data[(img.width * row + col) * 4 + 1]
    16.             b += data[(img.width * row + col) * 4 + 2]
    17.         }
    18.     }
    20.     // 计算平均值
    21.     r /= img.width * img.height
    22.     g /= img.width * img.height
    23.     b /= img.width * img.height
    25.     // 将结果取整
    26.     r = Math.round(r)
    27.     g = Math.round(g)
    28.     b = Math.round(b)
    30.     // 给背景设置渐变
    31.     bgBox.style.backgroundImage = `linear-gradient(rgb(${r}), rgb(${g}), rgb(${b})`;
    32.   }