Masquage des couleurs d'icônes avec HTML5 Canevas

Je masque les couleurs d'une icône qui est l'image d'arrière-plan d'un bouton. Le code ci-dessous fonctionne bien pour une image mais ne fonctionne pas pour l'image d'arrière-plan. S'il vous plaît aider !!Masquage des couleurs d'icônes avec HTML5 Canevas

IconMasking.js:

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

Source

2013-07-24 Anonymous

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

Source

2013-07-24 12:11:12

Masquage des couleurs d'icônes avec HTML5 Canevas

Répondre

Questions connexes