Solitude开发记：Canvas色值过深导致的缺失

在写api取色时，想起了一个存在很久的小Bug。在此之前Solitude只有本地取色功能，也就是将post-cover的src创建为Canvas，再去算出平均颜色从而得到主色调。

但在颜色较深的图片下，就会计算丢失，使得最终的色值（RGB）不足六位。

解决方法

改动方法是在计算颜色值时，使用padStart函数来确保颜色值是2位数值。如果颜色值不足2位，padStart函数会在颜色值前面添加0，直到颜色值的长度达到2位。

function coverColor() {

            ···

            // 修改前
            var value = "#" + r.toString(16) + g.toString(16) + b.toString(16);
            // 修改后
            var value = "#" + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');

            ···

}

那么在主色调接近深色时，发现侧边栏的个人卡片（作者）的card-info和author-info__sayhi字色和主色调（深黑）冲突了。新增变量brightness计算出亮度值，进行RGB颜色模型的权重，亮度值小于将对应的类赋值相对色。

为了在背景颜色较暗的情况下，以提高可读性。

function coverColor() {

            ···

            // 新增brightness计算亮度值
            var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
            if (brightness < 125) {
                var cardContents = document.getElementsByClassName('card-content');
                for (var i = 0; i < cardContents.length; i++) {
                    cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
                }

                var authorInfo = document.getElementsByClassName('author-info__sayhi');
                for (var i = 0; i < authorInfo.length; i++) {
                    authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
                    authorInfo[i].style.setProperty('color', 'var(--sco-white)');
                }
            }

            ···

}