Color Manipulation——顏色操作

A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
柵格數據源允許對像素值的任意操作。在這個例子中，輸入瓦片數據源的RGB值可以在用第二個柵格數據源渲染之前的逐像素操作中進行調整。柵格操作把RGB空間中的像素轉換為HCL顏色空間，基于上面的控件進行調整，然后把它們在渲染之前轉換回RGB空間進行渲染。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Color Manipulation</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
    <style>
      table.controls td {
        text-align: center;
        padding: 2px 5px;
        min-width: 60px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <table class="controls">
      <tr>
        <td>hue</td>
        <td><span id="hueOut"></span>°</td>
        <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
      </tr>
      <tr>
        <td>chroma</td>
        <td><span id="chromaOut"></span> %</td>
        <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
      </tr>
      <tr>
        <td>lightness</td>
        <td><span id="lightnessOut"></span> %</td>
        <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
      </tr>
    </table>
    <script>
      /**
       * Color manipulation functions below are adapted from
      * https://github.com/d3/d3-color.
       * 下面的顏色操作函數源自https://github.com/d3/d3-color
      */
      var Xn = 0.950470;
      var Yn = 1;
      var Zn = 1.088830;
      var t0 = 4 / 29;
      var t1 = 6 / 29;
      var t2 = 3 * t1 * t1;
      var t3 = t1 * t1 * t1;
      var twoPi = 2 * Math.PI;


      /**
       * Convert an RGB pixel into an HCL pixel.
       * 轉換RGB像素為HCL像素
      * @param {Array.<number>} pixel A pixel in RGB space.
       * @return {Array.<number>} A pixel in HCL space.
       */
      function rgb2hcl(pixel) {
        var red = rgb2xyz(pixel[0]);
        var green = rgb2xyz(pixel[1]);
        var blue = rgb2xyz(pixel[2]);

        var x = xyz2lab(
            (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
        var y = xyz2lab(
            (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
        var z = xyz2lab(
            (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);

        var l = 116 * y - 16;
        var a = 500 * (x - y);
        var b = 200 * (y - z);

        var c = Math.sqrt(a * a + b * b);
        var h = Math.atan2(b, a);
        if (h < 0) {
          h += twoPi;
        }

        pixel[0] = h;
        pixel[1] = c;
        pixel[2] = l;

        return pixel;
      }


      /**
       * Convert an HCL pixel into an RGB pixel.
       * 轉換HCL像素為RGB像素
       * @param {Array.<number>} pixel A pixel in HCL space.
       * @return {Array.<number>} A pixel in RGB space.
       */
      function hcl2rgb(pixel) {
        var h = pixel[0];
        var c = pixel[1];
        var l = pixel[2];

        var a = Math.cos(h) * c;
        var b = Math.sin(h) * c;

        var y = (l + 16) / 116;
        var x = isNaN(a) ? y : y + a / 500;
        var z = isNaN(b) ? y : y - b / 200;

        y = Yn * lab2xyz(y);
        x = Xn * lab2xyz(x);
        z = Zn * lab2xyz(z);

        pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z);
        pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z);
        pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);

        return pixel;
      }

      function xyz2lab(t) {
        return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
      }

      function lab2xyz(t) {
        return t > t1 ? t * t * t : t2 * (t - t0);
      }

      function rgb2xyz(x) {
        return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
      }

      function xyz2rgb(x) {
        return 255 * (x <= 0.0031308 ?
            12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
      }

      var raster = new ol.source.Raster({
        sources: [new ol.source.Stamen({
          layer: 'watercolor'
        })],
        operation: function(pixels, data) {
          var hcl = rgb2hcl(pixels[0]);

          var h = hcl[0] + Math.PI * data.hue / 180;
          if (h < 0) {
            h += twoPi;
          } else if (h > twoPi) {
            h -= twoPi;
          }
          hcl[0] = h;

          hcl[1] *= (data.chroma / 100);
          hcl[2] *= (data.lightness / 100);

          return hcl2rgb(hcl);
        },
        lib: {
          rgb2hcl: rgb2hcl,
          hcl2rgb: hcl2rgb,
          rgb2xyz: rgb2xyz,
          lab2xyz: lab2xyz,
          xyz2lab: xyz2lab,
          xyz2rgb: xyz2rgb,
          Xn: Xn,
          Yn: Yn,
          Zn: Zn,
          t0: t0,
          t1: t1,
          t2: t2,
          t3: t3,
          twoPi: twoPi
        }
      });

      var controls = {};

      raster.on('beforeoperations', function(event) {
        var data = event.data;
        for (var id in controls) {
          data[id] = Number(controls[id].value);
        }
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Image({
            source: raster
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 2500000],
          zoom: 2,
          maxZoom: 18
        })
      });

      var controlIds = ['hue', 'chroma', 'lightness'];
      controlIds.forEach(function(id) {
        var control = document.getElementById(id);
        var output = document.getElementById(id + 'Out');
        control.addEventListener('input', function() {
          output.innerText = control.value;
          raster.changed();
        });
        output.innerText = control.value;
        controls[id] = control;
      });
    </script>
  </body>
</html>

本文鏈接：https://blog.csdn.net/SmileCoffin/article/details/73850271

智能推薦

自定義Xshell顏色主題Color Schemes

xshell是一款強大的安全終端模擬軟件，支持SSH1, SSH2, 以及Microsoft Windows 平臺的TELNET 協議。現在推薦幾款不錯的xshell自定義顏色配色方案。 1.首先創建txt文件：scheme1.txt。編輯以下內容：保存文件為：scheme1.xcs. 同樣的方式建立文件scheme2.xcs: 2.導入上述建立的文件步驟：xshel tools -->...

react navigation back icon color設置導航返回按鈕顏色

自定義導航返回按鈕顏色，參考文檔找了半天沒解決，下面是我的比較笨的解決辦法，如果您有簡單的辦法麻煩評論告知一下。版本信息設置顏色方法綠色部分是設置顏色的地方。效果如下：這樣的寫法略顯繁瑣，正在找簡單的實現辦法...

input光標使用caret-color改變顏色

本文轉載自：https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/ CSS caret-color屬性可以改變輸入框插入光標的顏色，同時又不改變輸入框里面的內容的顏色。代碼為： caret-color屬性不僅對于原生的輸入表單控件有效，設置contenteditable的普通HTML標簽也適用。兼容性 c...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

Color Manipulation——顏色操作

智能推薦

猜你喜歡