【JavaScript】實作簡單的圖片處理

目錄

圖片在前端的存盤形式

前端上傳圖片

圖片處理

灰度操作

負片效果

壓縮

膨脹

馬賽克

字符畫

參考資料

圖片在前端的存盤形式

圖片以Uint8ClampedArray的格式存盤. 這是一個一維陣列,每四位組成一個像素點,分別代表rgba四個引數,每個引數的取值范圍都是0~2^8-1(0~255).

// 這是一個全黑色,透明的像素點
const pixel = new Uint8ClampedArrray([0,0,0,255]);

一張圖片就是由 寬 x 高 個這樣的像素點組成的.

前端上傳圖片

圖片的容器標簽是<img />,在JavaScript中可以用new Image()來構造.

export function createImageElement(src) {
    const img = new Image();
    img.src = src;
    return img;
}

前端選擇檔案,都通過<input type="file"/>來完成,對于選中的圖片檔案,使用FileReader的readAsDataURL方法讀取.

const reader = new FileReader();
reader.onload = () => {
  const img = createImageElement(reader.result);
};
reader.readAsDataURL(file);

這里為了方便DOM操作,用svelte框架來快速實作一個圖片上傳器.

<script>
  import { createEventDispatcher, onMount, tick } from "svelte";
  import { createImageElement } from "../../utils";

  export let size = 50;

  let image;
  let imgSrc;
  let inputDom;
  let container;

  onMount(() => {
    container.style.setProperty("--trigger-size", size + "px");
  });

  const dispatch = createEventDispatcher();

  const pickHandler = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = async () => {
      imgSrc = reader.result;
      const img = createImageElement(reader.result);
      await tick();
      dispatch("picked", {
        preview: image,
        src: reader.result,
        img,
        file,
        event,
      });
    };
    reader.readAsDataURL(file);
  };

  const triggerClick = () => {
    inputDom.click();
  };
</script>

<div bind:this={container} class="image-picker_container">
  <div on:click|stopPropagation={triggerClick} class="image-picker_trigger">
    {#if imgSrc}
      <img
        bind:this={image}
        src={imgSrc}
        alt="Error"
        class="image-picker_preview"
      />
    {:else}
      <div class="image-picker_cross" />
    {/if}

    <input
      bind:this={inputDom}
      type="file"
      on:change={pickHandler}
      class="image-picker_input-hidden"
    />
  </div>
</div>

<style>
  .image-picker_container {
    --trigger-padding: 4px;
    --trigger-border: 1px;
    --cross-size: calc(var(--trigger-size) * 0.6);
  }
  .image-picker_preview {
    width: var(--trigger-size);
    height: var(--trigger-size);
    object-fit: contain;
  }
  .image-picker_input-hidden {
    display: none;
  }
  .image-picker_trigger {
    border: var(--trigger-border) dashed;
    padding: var(--trigger-padding);
    height: var(--trigger-size);
    width: var(--trigger-size);
    position: relative;
  }
  .image-picker_cross::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--cross-size);
    border: calc((var(--trigger-size) * 0.2) / 2) solid #ccc;
  }
  .image-picker_cross::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: var(--cross-size);
    border: calc((var(--trigger-size) * 0.2) / 2) solid #ccc;
  }
</style>

未選擇圖片前,是一個加號.

選擇完圖片會自動把圖片縮放在框內,起到一個預覽的效果.

圖片處理

有了圖片就可以對圖片進行操作了.上篇中我們獲得了 image 物件,但是要獲取像素資料,還得借助canvas.

離屏畫布參考 OffscreenCanvas

const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
const imageData = ctx.getImageData(0, 0, image.width, image.height);

這里獲取的imageData是一個ImageData的實體.它的結構如下:

interface ImageData{
  data: Uint8ClampedArray;
  width: Number;
  height: Number;
}

為了方便管理各種圖片操作,我們定義一個ImageOperation類.

export class ImageOperation {
    PIXEL_SIZE = 4; // 一個像素長度為4
    imageData = [];

    constructor(imageData) {
        this.imageData = imageData
    }

    // ...methods
}

增加一個用于展示的視圖層

<script>
    import { tick } from "svelte";
    import { ImageOperation } from "../utils/imageOperation";

    import ImagePicker from "./components/ImagePicker.svelte";

    let canvas;
    let canvasWidth = 0;
    let canvasHeight = 0;
    let resultImageArea;

    const pickedHandler = async ({ detail }) => {
        const { img: image } = detail;
        canvasWidth = image.width * 10;
        canvasHeight = image.height * 10;
        await tick();

        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        const imageData = ctx.getImageData(0, 0, image.width, image.height);

        const resultCtx = resultImageArea.getContext("2d");
        const nimgData = new ImageOperation(imageData)
            // ---- 主要在這里呼叫圖片操作方法 ----
            // .grayscale()
            // .invert()
            // .compress(4, 4)
            // .expand(4, 4)
            // ----------------------------------
            .imageData;
        resultCtx.putImageData(nimgData, 0, 0);
    };
</script>

<canvas
    bind:this={canvas}
    width={canvasWidth}
    height={canvasHeight}
    class="image-data-canvas-hidden"
/>
<ImagePicker on:picked={pickedHandler} />
<hr />
<canvas
    bind:this={resultImageArea}
    width={canvasWidth}
    height={canvasHeight}
    class="result-image-canvas-area"
/>

<style>
    .image-data-canvas-hidden {
        display: none;
    }
    .result-image-canvas-area {
        border: 1px dashed;
        padding: 5px;
    }
</style>

好了,現在選擇一張我可愛的女朋友的美照(532*539像素),就會這樣:

灰度操作

對每個像素點的rgb值做一個平均值,就可以得到灰度圖,這里的平均值有一個經驗上的公式.

export class ImageOperation {
    PIXEL_SIZE = 4;
    imageData = [];

    constructor(imageData) {
        this.imageData = imageData
    }

    grayscale() {
        const data = this.imageData.data;
        for (let i = 0; i < data.length; i = i + this.PIXEL_SIZE) {
            const avg = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
            data[i] = avg;
            data[i + 1] = avg;
            data[i + 2] = avg;
            data[i + 3] = data[i + 3];
        }
        return this;
    }
}

效果:

負片效果

將rgb的每個值都取反,即可.

    // ...
    invert() {
        const data = this.imageData.data;
        for (let i = 0; i < data.length; i = i + this.PIXEL_SIZE) {
            const max = 255;
            data[i] = max - data[i];
            data[i + 1] = max - data[i + 1];
            data[i + 2] = max - data[i + 2];
            data[i + 3] = data[i + 3];
        }
        return this;
    }

效果:

壓縮

上面我們是一個像素點都不落下的處理,壓縮的原理就是減少采樣量,我們定義橫向和縱向兩個采樣步長,表示間隔采樣,以壓縮圖片.

    /**
     * 壓縮
     * @param {Number} xStep 橫向預設個數
     * @param {Number} yStep 縱向預設個數
     */
    compress(xStep = 1, yStep = 1) {
        const { data, width, height } = this.imageData;
        const buffer = [];
        let newHeight = 0;
        for (let i = 0; i < height; i = i + yStep) {
            newHeight++;
            for (let j = 0; j < width; j = j + xStep) {
                const cur = (i * width * this.PIXEL_SIZE + j * this.PIXEL_SIZE);
                buffer.push(...data.slice(cur, cur + this.PIXEL_SIZE));
            }
        }
        this.imageData = new ImageData(Uint8ClampedArray.from(buffer), buffer.length / this.PIXEL_SIZE / newHeight, newHeight);
        return this;
    }

compress(4,4)效果如下:

橫縱比不一樣也是可以的,compress(4, 8)效果如下:

膨脹

壓縮是丟掉部分資料,壓縮后的圖片放大就會失真.想要再恢復就不可能了.膨脹(或者叫拉伸)是將每個像素橫向和縱向都擴展復制.

    /**
     * 膨脹
     * @param {Number} xStep 橫向復制個數
     * @param {Number} yStep 縱向復制個數
     */
    expand(xStep = 1, yStep = 1) {
        const { data, width, height } = this.imageData;
        const buffer = [];
        let newHeight = 0;
        for (let i = 0; i < height; i++) {
            for (let m = 0; m < yStep; m++) { // 縱向擴充
                newHeight++;
                for (let j = 0; j < width; j++) {
                    const cur = (i * width * this.PIXEL_SIZE + j * this.PIXEL_SIZE);
                    for (let n = 0; n < xStep; n++) { // 橫向擴充
                        buffer.push(...data.slice(cur, cur + this.PIXEL_SIZE));
                    }
                }
            }
        }
        this.imageData = new ImageData(Uint8ClampedArray.from(buffer), buffer.length / this.PIXEL_SIZE / newHeight, newHeight);
        return this;
    }

expand(4, 4)效果(太大了,截圖是縮放了頁面截的圖):

馬賽克

打碼就是故意丟棄照片細節的一個技術.有了壓縮和膨脹,我們可以得到一個簡單的打碼的思路,比如先壓縮,丟失一定資訊,然后再膨脹恢復到原來的大小.(當然加入隨機會更合理,這里不展開)

我們先compress(10,10)再expand(10,10)回來看看效果:

看著很平均,都是方塊,我們更換一下橫縱比,并且反復橫跳來兩次:

.compress(1, 20)
.expand(20, 1)
.compress(20, 1)
.expand(1, 20)

好了,面目全非了,我可愛的女票,不要打我,你永遠最美.

點化

我們還可以不改變原圖大小，直接挖去一些像素點，使用空白去填充，

    /**
     * @param {Number} xStep 橫向預設個數
     * @param {Number} yStep 縱向預設個數
     * @param {Array} fill 填充被挖去像素點的值
     */
    filter(xStep = 1, yStep = 1, fill = [255, 255, 255, 255]) {
        const { data, width, height } = this.imageData;
        const buffer = [];
        for (let i = 0; i < height; i = i + yStep) {
            for (let m = 0; m < yStep; m++) { // 縱向擴充
                if (m == 0) {
                    for (let j = 0; j < width; j = j + xStep) {
                        const cur = (i * width * this.PIXEL_SIZE + j * this.PIXEL_SIZE);
                        for (let n = 0; n < xStep; n++) { // 橫向擴充
                            if (n == 0) {
                                buffer.push(...data.slice(cur, cur + this.PIXEL_SIZE));
                            } else {
                                buffer.push(...fill);
                            }
                        }
                    }
                } else {
                    for (let k = 0; k < width; k++) {
                        buffer.push(...fill);
                    }
                }
            }
        }
        this.imageData = new ImageData(Uint8ClampedArray.from(buffer), width);
        return this;
    }

filter(2,2)效果：

注意，步長必須是寬/高的因數，否則像素會錯位

字符畫

玩完了像素操作,我們想想用字符去代替像素,就會畫出字符畫,是不是很有意思呢? 比如把我可愛的女朋友變成下面這樣:

我們用一個字符代表一個像素,原理還是和上文的灰度操作一樣,用一個平均的介于0~255之間的灰度值來表征一個像素,字符也不需要透明度,所以表征像素的四位可以直接合成一位. 而0~255之間0表示最黑,255表示最白,我們選擇字符集時按照字符濃密來對應0~255的灰度值.這里我隨便選擇了@#$%!80=>+;-.

<script>
  import { tick } from "svelte";

  import ImagePicker from "../components/ImagePicker.svelte";

  const PIXEL_SIZE = 4;

  let canvas;
  let imageWidth = 100;
  let imageHeight = 100;
  let textImageArea;

  let charList = "@#$%!80=>+;-".split("");
  const getChar = (uint8 = 0) => {
    const RANGE = 256;
    const size = charList.length;
    return charList[~~((uint8 * size) / RANGE)];
  };

  const pickedHandler = async ({ detail }) => {
    const { preview: image } = detail;
    imageWidth = image.width;
    imageHeight = image.height;
    await tick();

    const ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, imageWidth, imageHeight);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const textImage = imageToText(imageData);
    textImageArea.innerHTML = textImage;
  };

  function imageToText(imageData) {
    const { data, width } = imageData;
    let text = "";
    let row = 1;
    for (let i = 0; i < data.length; i = i + PIXEL_SIZE) {
      const avg = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
      text += getChar(avg);
      if (i / PIXEL_SIZE + 1 == width * row) {
        row++;
        text += "<br/>";
      }
    }
    return text;
  }
</script>

<canvas bind:this={canvas} width={imageWidth} height={imageHeight} />
<ImagePicker on:picked={pickedHandler} />
<hr />
<div
  bind:this={textImageArea}
  width={imageWidth * 12}
  height={imageHeight * 6}
  class="text-image"
/>

<style>
  canvas {
    display: none;
    background-color: #666;
  }
  .text-image {
    font-family: monospace;
    /* Chrome 最小12px, 這里字寬12 和 行高6 是一個經驗值(英文字符2/1, 中文字符1/1) */
    font-size: 12px;
    line-height: 6px;
  }
</style>

比如你也可以選擇漢字,來給心愛的她一個驚喜:

參考資料

1. https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas
2. https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData
3. https://blog.csdn.net/sinat_33488770/article/details/119298802