Có thể thay thế màu trong hình ảnh được mã hóa 64 cơ sở không?

Question

Có cách nào để có một chuỗi căn cứ 64, ví dụ:

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

Và thay thế một màu đồng nhất với một màu đồng nhất sử dụng JavaScript?

Trong ví dụ cụ thể này, tôi có một màu đồng nhất trong biểu tượng (#13A3F7) mà tôi muốn thay thế bằng một màu khác (#ff6400).

Lý do để làm điều này là không phải là một lần duy nhất. Tôi muốn có thể thay đổi biểu tượng thành bất kỳ màu nào có cài đặt.

Có cách nào để tôi có thể thực hiện việc này không?

Answer 1

Đây là một chức năng rất ít mà mất 3 thông số: dữ liệu, colorFrom, colorTo (cả màu sắc cần được cung cấp trong hex)

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

Một chức năng bổ sung là cần thiết để chuyển đổi màu sắc hex để RGB (cho phù hợp đúng)

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

Cách sử dụng sẽ như vậy:

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

Nó wi sẽ trả về dữ liệu mới: image/png; URI với các màu sắc hoán đổi, đây là một jsfiddle làm việc của cuối cùng dẫn

http://jsfiddle.net/V5dU2/

(thử nghiệm trên Chrome, Firefox và IE10)