快捷導(dǎo)航

JS實(shí)現(xiàn)彩色圖片轉(zhuǎn)換為黑白圖片的3種方法

更新時(shí)間：2024年09月10日 10:46:46 作者：代碼里的小貓咪

本文主要介紹了JS實(shí)現(xiàn)彩色圖片轉(zhuǎn)換為黑白圖片的3種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 使用 Canvas

研究 canvas 時(shí)發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象——將彩色圖片巧妙地轉(zhuǎn)換為黑白圖片。以下是實(shí)現(xiàn)這一功能的簡(jiǎn)潔代碼示例：

<div style="display: flex">
  <img src="./panda.jpeg" />
  <button onclick="change()">轉(zhuǎn)換</button>
  <canvas width="358" height="362"></canvas>
</div>

大致步驟為：

1. 把 img 元素畫到 canvas 上

2. 獲取畫布某個(gè)區(qū)域的圖像信息，返回圖片信息對(duì)象

包括 data-類型化數(shù)組（紅，綠，藍(lán)，alpha），圖片的寬高等數(shù)據(jù)

3. 重新設(shè)置圖像數(shù)據(jù)到畫布

<script>
  function change() {
    const img = document.querySelector("img");
    const cvs = document.querySelector("canvas");
    // 獲取繪圖表面提供 2D 渲染上下文
    const ctx = cvs.getContext("2d");
    // 把img元素畫到canvas畫布上
    ctx.drawImage(img, 0, 0);

    // 獲取畫布某個(gè)區(qū)域的圖像信息（整個(gè)圖片區(qū)域）
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    // imageData：圖片信息對(duì)象
    for (let i = 0; i < imageData.data.length; i += 4) {
      // 將灰度值重新賦值給rgba
      const r = imageData.data[i];
      const g = imageData.data[i + 1];
      const b = imageData.data[i + 2];
      const avg = (r + g + b) / 3;
      imageData.data[i] =
      imageData.data[i + 1] =
      imageData.data[i + 2] =
      avg;
    }
    // 重新設(shè)置圖像數(shù)據(jù)到畫布
    ctx.putImageData(imageData, 0, 0);
  }
  </script>

實(shí)現(xiàn)的效果如下：

注意：需要將 canvas 的 width 和 height 設(shè)置成圖片的真實(shí)大小，否則可能出現(xiàn)轉(zhuǎn)換后圖片尺寸不一致。

黑白圖片的原理

1. 畫布中的一個(gè)圖像是由多個(gè)像素點(diǎn)組成，每個(gè)像素點(diǎn)有四個(gè)數(shù)據(jù)：紅、綠、藍(lán)、alpha。

2. 將圖像變成黑白，只需要將圖像的每一個(gè)像素點(diǎn)設(shè)置成當(dāng)前紅、綠、藍(lán)值的平均數(shù)即可。

2. 使用 CSS 濾鏡

如果只是希望在頁面上顯示灰度圖片，而不需要在 JavaScript 中處理圖片數(shù)據(jù)，那么可以直接使用 CSS 的 filter 屬性來實(shí)現(xiàn)。代碼如下：

<div>
  <img src="./panda.jpeg" />
  <button onclick="change()">點(diǎn)擊</button>
</div>
<script>
  const change = () => {
    const img = document.querySelector('img');
    img.style.filter = 'grayscale(100%)'
  }
</script>

這種方法不會(huì)改變圖片的原始數(shù)據(jù)，只是改變了其在頁面上的顯示方式。

效果如下：

3. 使用第三方庫

比如 Three.js 或 Pixi.js，這些庫提供了自己的方法來處理圖像數(shù)據(jù)，包括灰度化。如果需要更加精準(zhǔn)的轉(zhuǎn)換操作，可以參考其官方文檔。

到此這篇關(guān)于JS實(shí)現(xiàn)彩色圖片轉(zhuǎn)換為黑白圖片的3種方法的文章就介紹到這了,更多相關(guān)JS 彩色圖片轉(zhuǎn)換黑白圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: