使用 Canvas 繪製圖片

除了直接使用 <img> 顯示圖片外，亦可 <canvas> 並以 JavaScript 透過 Canvas 繪製圖片。

Version

Canvas

在 Vue 完全以 Canvas 繪製圖片。

<script setup>
import { onMounted } from 'vue'

let canvas = $ref (null)

onMounted (_ => {
  let context = canvas.getContext('2d')

  let img = new Image
  img.src = 'https://konvajs.org/assets/yoda.jpg'

  img.onload = _ => {
    context.canvas.width = img.width
    context.canvas.height = img.height
    context.drawImage(img, 0, 0)
  }
})
</script>

<template>
  <canvas ref="canvas"/>
</template>

21 行

<canvas ref="canvas"/>

在 HTML 內使用 <canvas> 繪製圖片，因為要由 Vue 控制，特別使用 ref 定義名稱。

第 4 行

let canvas = $ref (null)

使用 $ref 定義 canvas 初始值為 null。

第 6 行

onMounted (_ => {
  let context = canvas.getContext('2d')
  
  let img = new Image
  img.src = 'https://konvajs.org/assets/yoda.jpg'
  
  img.onload = _ => {
    context.canvas.width = img.width
    context.canvas.height = img.height
    context.drawImage(img, 0, 0)
  }
})

由 canvas.getContext 取得 2D 的 context
將圖片建立在 Image Object，當 Object 建立成功後會觸發 onload event，可在此取得圖片長寬，並使用 context 的 drawImage 在 canvas ref 繪圖

若要一開始就使用 Canvas 繪圖，則一定要寫在 onMounted 內，因為此時 DOM 才準備好，Canvas 才能夠繪圖

Conclusion

若想完全以 code 繪製 HTML 5 Canvas，其實可不必使用 package，直接使用 Canvas API 即可