使用 Canvas 繪製圖片 | 點燈坊

HTML 5 Canvas 除了能繪製圖形外，也能繪製圖片，讓我們以更靈活方式控制圖片。

Version

Vue 2.6.11
HTML 5

Canvas

除了使用 <img> 顯示圖片外，我們也可使用 HTML 5 Canvas 繪製圖片。

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

<script>
let mounted = function() {
  let context = this.$refs.canvas.getContext('2d')
  context.canvas.width = innerWidth
  context.canvas.height = innerHeight

  let image = new Image
  image.src = 'https://konvajs.org/assets/yoda.jpg'
  image.onload = () => context.drawImage(image, 5, 5)
}

export default {
  name: 'App',
  mounted
}
</script>

第 2 行

<canvas ref="canvas"/>

使用 HTML 5 的 <canvas> tag，為了能讓 Vue 控制，特別加上 ref。

第 7 行

let context = this.$refs.canvas.getContext('2d')
context.canvas.width = innerWidth
context.canvas.height = innerHeight

• 使用 $refs 取得 canvas ref，並指使用其 2d context
• 設定 canvas 的長寬

11 行

let image = new Image
image.src = 'https://konvajs.org/assets/yoda.jpg'
image.onload = () => context.drawImage(image, 5, 5)

建立 Image Object，將 url 或 Base64 String 指定給 src，最後在其 onload event 使用 drawImage() 在 canvas 繪製圖片。

Conclusion

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