將灰度轉換爲柔和

我有許多不同的灰度（從黑色到白色），我想將其轉換爲隨機柔和的顏色，其中每個柔和色具有與灰色相同的亮度。因此，深灰色應該轉換成任何隨機的深色粉彩。將灰度轉換爲柔和

我找到了一種方法來生成隨機柔和的顏色（Algorithm to randomly generate an aesthetically-pleasing color palette），但我不知道如何將灰色轉換成柔和的顏色，亮度相同。

有沒有人有一個想法如何解決這個問題？

非常感謝！

來源

2015-12-20 user1658080

由MAX（大概255）只需乘以灰度值和分裂的RGB值？ –

在Stack Overflow上搜索「亮度」應該讓你開始。 – m69

謝謝@SamiKuhmonen，工作正常！ – user1658080

你可以做兩種顏色，對應於零灰度值和對應的255

的影響你的灰度值「白色」顏色「黑」色之間的線性inpterpolation描述會使用你的淡色作爲「黑色」和白色作爲「白色」。在涉及不同色調時，RGB空間中的顏色插值很棘手，但在您的情況下，如果兩種顏色具有相同或相似的色調，則應該沒有問題。（您的原始代碼可能會使用相同的機制，通過在白色和隨機顏色之間插入一半）

下面是一個將灰度圖像數據轉換爲柔和顏色方案的示例，該方案基於紅色數據。（灰色有三個相同顏色成分，但沒有努力來確保。）

function pastel(idata, black, white) { 
    var data = idata.data; 
    var n = 0; 

    for (var y = 0; y < idata.height; y++) { 
     for (var x = 0; x < idata.width; x++) { 
      var grey = data[n]/255.0; 
      var yerg = 1.0 - grey; 

      data[n++] = (yerg * black.r + grey * white.r) | 0; 
      data[n++] = (yerg * black.g + grey * white.g) | 0; 
      data[n++] = (yerg * black.b + grey * white.b) | 0; 
      n++; 
     } 
    }   
}

編輯：下面是尤爾複製和粘貼的樂趣完整的網頁。您必須將圖像文件"pic.png"放在同一個目錄中。顏色是Javascript對象，其中r，g和b字段。

圖像數據來自繪製圖像的畫布。圖像數據包含rgba格式的像素;它可以被操縱，然後放回到畫布上。（在循環中的額外n++跳過alpha值並讓它保持不變。）

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8" /> 
<title>Colour Interpolation</title> 
<script type="text/javascript"> 

    function pastel(idata, black, white) { 
     var data = idata.data; 
     var n = 0; 

     for (var y = 0; y < idata.height; y++) { 
      for (var x = 0; x < idata.width; x++) { 
       var grey = data[n]/255.0; 
       var yerg = 1.0 - grey; 

       data[n++] = (yerg * black.r + grey * white.r) | 0; 
       data[n++] = (yerg * black.g + grey * white.g) | 0; 
       data[n++] = (yerg * black.b + grey * white.b) | 0; 
       n++; 
      } 
     }   
    } 

    window.onload = function() { 
     var cv = document.getElementById("map"); 
     var cx = cv.getContext("2d"); 

     var img = document.createElement('img'); 

     img.src = "pic.png"; 
     img.onload = function(e) { 
      var img = this; 
      img.width = img.naturalWidth; 
      img.height = img.naturalHeight; 

      cv.width = img.width ; 
      cv.height = img.height; 

      cx.drawImage(img, 0, 0); 

      var idata = cx.getImageData(0, 0, img.width, img.height); 

      pastel(idata, 
       {r: 102, g: 51, b: 0}, 
       {r: 255, g: 255, b: 204}); 
      cx.putImageData(idata, 0, 0); 
     }; 

    } 

</script> 
</head> 

<body> 
<canvas id="map" width="96" height="96">Kann nix.</canvas> 
</body> 

</html>

來源

2015-12-21 07:01:11

非常感謝您的回覆和努力。作爲一個完整的java腳本初學者，你能幫我解釋一下如何使用這個代碼嗎？對不起，非常感謝！：D – user1658080

我已經添加了一個完整的網頁（沒有圖像），您可以複製和粘貼。我希望這可以幫助您開始使用圖像操作。代碼在Firefox中進行了測試。 –

非常感謝，但我無法運行此代碼，我嘗試了使用名爲「pic.png」的圖像的FF和Chrome。我創建了一個jsfiddle;我犯了一個錯誤嗎？ https://jsfiddle.net/er4pr266/ – user1658080

將灰度轉換爲柔和

回答

相關問題