顏色資訊

在上一章節中，講解了如何從圖片中獲取資訊，這章就來實做一個在影像編輯軟體中常見的功能，在滑鼠遊標移到圖片像素的時候，即時顯示該點的資訊。

首先將 Canvas 監聽滑鼠移動的事件。

<canvas ref="drawCanvas" @mousemove="handleMouseMove"> </canvas>

接著透過這個事件中得到的 x , y 值，呼叫之前提過的 getImageData，還記得之前說過的參數嗎？第一個是獲取的起始點，因為我們已經有了想要獲取點的 x , y 座標，所以就填入這兩個值，而寬高就各取一就好。

  getImageInfo(x, y) {
    const canvas = this.$refs.drawCanvas
    const context = canvas.getContext('2d')
    return context.getImageData(x, y, 1, 1).data
  },
  handleMouseMove(event) {
    const { offsetX, offsetY } = event
    this.rgbaInfo = this.getImageInfo(offsetX, offsetY)
  }

因為這邊情況比較單純，所以直接使用了 offsetX, offsetY，在實際運用上請照情況使用

所以我們應該可以獲得長度為四的 Uint8ClampArray，接下來直接在畫面上呈現出來就可以了。

    <div>R: {{ rgbaInfo[0] }}</div>
    <div>G: {{ rgbaInfo[1] }}</div>
    <div>B: {{ rgbaInfo[2] }}</div>

圖片寬高

接下來我們修改一下之前的程式，將之前獲得的寬、高也一併顯示出來。

    const data = await getImageData(file)
    this.drawImage(data.img)
    this.imgWidth = data.width
    this.imgHeight = data.height

稍微做一下調整，這樣就成功獲得圖片資訊囉！

小結

今天完成了資訊面板的部分，明天可以開始來用些效果囉！