Question

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

IconMasking.js：

function tintImage（imgElement，tintColor）{

    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>

Answer 1

            //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>

用HTML5 Canvas屏蔽图标颜色

1 个答案: