È possibile sostituire un colore in un'immagine con codifica 64 di base?

Question

C'è un modo per fare una stringa di base 64, ad esempio:

.copyIcon {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==") center center no-repeat;} 

e sostituire un colore a tinta unita con un altro colore solido utilizzando Javascript?

In questo esempio specifico ho un colore a tinta unita nell'icona (#13A3F7) che vorrei sostituire con un altro colore a tinta unita (#ff6400).

La ragione per fare questo è che non è una tantum. Mi piacerebbe poter cambiare l'icona in qualsiasi colore con un'impostazione.

C'è un modo per farlo?

Answer 1

Qui è un po funzione che prende 3 parametri: dati, colorFrom, colorTo (entrambi i colori devono essere forniti in esadecimale)

function changeColInUri(data,colfrom,colto) { 
    // create fake image to calculate height/width 
    var img = document.createElement("img"); 
    img.src = data; 
    img.style.visibility = "hidden"; 
    document.body.appendChild(img); 

    var canvas = document.createElement("canvas"); 
    canvas.width = img.offsetWidth; 
    canvas.height = img.offsetHeight; 

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

    // remove image 
    img.parentNode.removeChild(img); 

    // do actual color replacement 
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 
    var data = imageData.data; 

    var rgbfrom = hexToRGB(colfrom); 
    var rgbto = hexToRGB(colto); 

    var r,g,b; 
    for(var x = 0, len = data.length; x < len; x+=4) { 
     r = data[x]; 
     g = data[x+1]; 
     b = data[x+2]; 

     if((r == rgbfrom.r) && 
      (g == rgbfrom.g) && 
      (b == rgbfrom.b)) { 

      data[x] = rgbto.r; 
      data[x+1] = rgbto.g; 
      data[x+2] = rgbto.b; 

     } 
    } 

    ctx.putImageData(imageData,0,0); 

    return canvas.toDataURL(); 
} 

Una funzione aggiuntiva è necessaria per convertire i colori esadecimali RGB (per corretto accoppiamento)

function hexToRGB(hexStr) { 
    var col = {}; 
    col.r = parseInt(hexStr.substr(1,2),16); 
    col.g = parseInt(hexStr.substr(3,2),16); 
    col.b = parseInt(hexStr.substr(5,2),16); 
    return col; 
} 

Uso sarebbe in questo modo:

changeColInUri(
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==", 
    "#13A3F7", 
    "#ff6400" 
); 

E wi tornerò un nuovo dato: image/png; URI con i colori invertiti, ecco un jsfiddle di lavoro del risultato finale

http://jsfiddle.net/V5dU2/

(testato su Chrome, Firefox e IE10)