讀取圖片

首先，我們先來創造一個 Canvas 元素，及一個 input 來當作圖片輸入源

<input
  type="file"
  accept="image/jpg,image/jpeg,image/png"
  @change="getData"
>
<canvas ref="drawCanvas" />

接著在 input 獲取檔案時執行 Function，基本上就是在獲取檔案之後，使用 FileReader 讀取檔案之後接著創造一個 Image，這樣我們就成功拿到選取的圖片資訊

// 在methods裡定義
async getData(event) {
        const file = event.target.files[0]
        const data = await getImageData(file)
      }
      
// 抽出處理邏輯，以下為獲取圖片檔案
export const fileLoad = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}
export const imgLoad = src => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = src
  })
}

export const getImageData = async file => {
  try {
    const src = await fileLoad(file)
    const img = await imgLoad(src)
    const width = img.width
    const height = img.height
    return {
      width,
      height,
      img
    }
  } catch (e) {
    console.log(e)
  }
}

預覽

接著我們繼續使用剛獲取的圖片，把圖片呈現在 Canvas 上，首先我們需要獲取渲染環境( 在本文中只會用到 2d 環境 )，接著設定寬度及高度，其中的 cw , ch 可依據使用情境做變更，目前為了方便直接鎖死比例。接著使用 drawImage 將圖片呈現

 drawImage(imageContent) {
        const canvas = this.$refs.drawCanvas
        const context = canvas.getContext('2d')
        const cw = window.innerWidth - 800
        const ch = cw * (9 / 16)
        canvas.width = cw
        canvas.height = ch
        context.drawImage(imageContent, 0, 0, cw, ch)
      }

drawImage

drawImage 我們使用了五個參數，第一個參數是我們剛剛獲取的圖片，而除了圖片之外也可以接受來自其他 Canvas 及 Video 的內容，接下來兩個參數分別為起始繪畫地點( x , y )，座標點是從左上角開始算，所以我們設定從起點開始就好。在接下來的兩個參數是設定縮放比例，在這邊直接填上剛剛算好的寬高就好。如果不帶入這兩個參數的話，當原始圖片的寬高大於我們設定的寬高的時候會發現圖片顯示不完整。

小結

今天講解了 input 跟 canvas 的搭配使用，明天將會進一步到獲取圖片上的資訊。