テーマの色に基づいて画像の色を変更します.

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);
    }
);