Javascript 使用HTML5画布的图标颜色掩蔽

我是一个颜色掩蔽图标，这是一个按钮的背景图像。下面的代码适用于图像，但不适用于背景图像。请帮忙

IconMasking.js：

函数着色图像（IMGELENT、tintColor）{

调试器；
var imgsrc=$（“.ui图标组”）.css（“背景图像”）；
imgsrc=imgsrc.replace（“url(http://localhost:42699", "");
imgsrc=imgsrc.replace（“）”，“）；
imgElement.onload=函数（）{
房屋宽度=64；
房屋高度=42；
ctxHouse.drawImage（imgElement，0,0）；
}
imgElement.src=imgsrc；
调试器；
//创建隐藏画布（使用图像尺寸）
var canvas=document.createElement（“canvas”）；
画布宽度=64；
高度=42；
调试器；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（imgElement，0,0）；
VarMap=ctx.getImageData（0,03203240）；
var imdata=map.data；
//将图像转换为灰度
风险值r、g、b、平均值；
对于（var p=0，len=imdata.length；p

//现在可用于图像和背景图像。
//注意：跨域映像路径将不起作用。
更改背景图像颜色
背景图像
#mugBG{width:200px；height:213px；lineheight:213px；background:url（your image path.png）不重复0；文本对齐：居中；}
var canvas=document.createElement（“画布”），
ctx=canvas.getContext（“2d”），
原始像素=空，
currentPixels=null；
函数HexToRGB（Hex）{
var Long=parseInt（十六进制替换（/^#/，“”），16）；
返回{
R：（长>>>16）和0xff，
G:（长>>>8）和0xff，
B:Long&0xff
};
}
函数changeColor（o、bgImage）{
o、 src=“”；
o、 src=o.alt；
获取像素（o）；
if（！originalPixels）return；//检查图像是否已加载
var newColor=HexToRGB（document.getElementById（“color”）.value）；
对于（变量I=0，L=originalPixels.data.length；I0）{
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
o、 src=canvas.toDataURL（“image/png”）；
bgImage.style.background='url（'+o.src+'）；
}
函数getPixels（img）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight，0，0，img.width，img.height）；
原始像素=ctx.getImageData（0,0，img.width，img.height）；
currentPixels=ctx.getImageData（0，0，img.width，img.height）；
//img.onload=null；
}

    debugger;
    var imgsrc = $(".ui-icon-group").css("background-image");
    imgsrc = imgsrc.replace("url(http://localhost:42699", "");
    imgsrc = imgsrc.replace(")", "");

    imgElement.onload = function () {
        house.width = 64;
        house.height = 42;
        ctxHouse.drawImage(imgElement, 0, 0);
    }
    imgElement.src = imgsrc;

    debugger;
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = 64;
    canvas.height = 42;

    debugger;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement, 0, 0);

    var map = ctx.getImageData(0, 0, 320, 240);
    var imdata = map.data;

    // convert image to grayscale
    var r, g, b, avg;
    for (var p = 0, len = imdata.length; p < len; p += 4) {
        r = imdata[p]
        g = imdata[p + 1];
        b = imdata[p + 2];

        avg = Math.floor((r + g + b) / 3);

        imdata[p] = imdata[p + 1] = imdata[p + 2] = avg;
    }

    ctx.putImageData(map, 0, 0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "source-atop";
    //    ctx.globalAlpha = 0.5;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

function getStyle(x, styleProp) {
    debugger;
    if (x.currentStyle) var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    return y;
}

/// some buttons for testing the demo

var bluBtt = document.createElement("button");
bluBtt.appendChild(document.createTextNode("Blue"));
var bgImg = new Image();
bluBtt.onclick = function () {
    tintImage(
        bgImg,
        "#000055"
 );
}
document.body.appendChild(bluBtt);
CSS :
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .ui-icon-group
        {
            background-image: url('Images/GroupGray.png');
            background-repeat: no-repeat;
        }
    </style>
HTML :
    <div>
        <a href="#" data-role="button" data-icon="group" id="dlt">Delete</a>
        <script src="Script/IconMasking.js" type="text/javascript"></script>
        <br />
    </div>

            //now working for both image and bg image.
            // note::  cross domain image path will not be working.

            <!doctype HTML>
            <html lang="pt-BR">
            <head>
                <meta charset="UTF-8" />
                <title>Change BG image color</title>
            </head>
            <body>



                <div id="mugBG">BG IMAGE</div>
                <style type="text/css">#mugBG{width:200px; height:213px; line-height:213px; background:url(your-image-path.png) no-repeat 0 0; text-align:center; }</style>

                <img src="your-image-path.png" id="mug" alt="your-image-path.png" width="200" height="213">

                <input type="text" id="color" value="6491ee" />
                <input type="button" value="image 1" onclick="changeColor(document.getElementById('mug'), document.getElementById('mugBG'))">

                <script type="text/javascript">
                    var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext("2d"),
                        originalPixels = null,
                        currentPixels = null;

                    function HexToRGB(Hex){

                        var Long = parseInt(Hex.replace(/^#/, ""), 16);
                        return {
                            R: (Long >>> 16) & 0xff,
                            G: (Long >>> 8) & 0xff,
                            B: Long & 0xff
                        };
                    }

                    function changeColor(o,bgImage){


                        o.src = "";
                        o.src = o.alt;

                        getPixels(o);

                        if(!originalPixels) return; // Check if image has loaded
                        var newColor = HexToRGB(document.getElementById("color").value);
                        for(var I = 0, L = originalPixels.data.length; I < L; I += 4){

                            if(currentPixels.data[I + 3] > 0){
                                currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                                currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                                currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                            }
                        }

                        ctx.putImageData(currentPixels, 0, 0);
                        o.src = canvas.toDataURL("image/png");
                        bgImage.style.background = 'url('+o.src+')';
                    }




                    function getPixels(img){

                        canvas.width = img.width;
                        canvas.height = img.height;

                        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                        originalPixels = ctx.getImageData(0, 0, img.width, img.height);
                        currentPixels = ctx.getImageData(0, 0, img.width, img.height);

                        //img.onload = null;
                    }

                </script>
            </body>
            </html>