根據主題顏色修改圖片的顏色

圖片例如這個：

最後的效果是這樣子的

具體代碼以下所示

var util = {
    /**
     * 根據主題顏色修改圖片顏色
     * @param  {[type]}   imgUrl    圖片url
     * @param  {[type]}   rgb_color 主題顏色
     * @param  {Function} callback  返回值 返回base64
     * @return {[type]}             [description]
     */
    changeImageColor: function (imgUrl, rgb_color, callback) {
        var threshold = 114; //默認顏色閥值 爲 114 －>和默認圖相關
        var img = new Image();
        img.src = imgUrl;
        //計算對應的通道值
        rgb_color = rgb_color || '#727272';
        var newR = parseInt('0x' + rgb_color.substr(1,2));
        var newG = parseInt('0x' + rgb_color.substr(3,2));
        var newB = parseInt('0x' + rgb_color.substr(5,2));
        //圖片加載後進行處理
        img.onload = function () {
            var width = img.width, 
                height = img.height,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d');
            canvas.width = width;
            canvas.height = height;
            // 將源圖片複製到畫布上
            ctx.drawImage(img, 0, 0, width, height);
            // 獲取畫布的像素信息
            var imageData = ctx.getImageData(0, 0, width, height);
            var data = imageData.data;
            // 對像素集合中的單個像素進行循環，每一個像素是由4個通道組成，因此要注意
            var i = 0;
            while (i < data.length) {
                var r = data[i++],
                    g = data[i++],
                    b = data[i++],
                    a = data[i++];
                //計算透明度
                var alp = (255 - r) / (255 - threshold);
                //判斷是否透明
                var isTransparent = (r == 255 && g == 255 && b == 255 && a == 255);
                if (isTransparent) { 
                    data[i - 1] = 0;
                } else {
                    data[i - 4] = newR;
                    data[i - 3] = newG;
                    data[i - 2] = newB;
                    data[i - 1] = (a !== 255) ? (255 - a) : (alp * 255); //處理透明的圖片和不透明的圖片
                }
            }
            // 將修改後的代碼複製回畫布中
            ctx.putImageData(imageData, 0, 0);
            // 圖片導出爲 png 格式
            var type = 'png';
            var imgData = canvas.toDataURL(type);
            // console.log(imgData); // 生成base64
            callback && callback(imgData);
        };
    }
};

//使用方式 其中 data、style 爲經過api讀取的值
util.changeImageColor(
    data.icon, //'http://127.0.0.1:5555/images/app/mc_forum_main_bar_button1_h.png',
    style.dz_skin_custom_main_color, //'#f51ca6', 
    function (data) {
        console.log(data);
    }
);

歡迎訪問個人網站 coolfishstudio.com