使用 Canvas 繪製縮小圖片 | 點燈坊

HTML 5 Canvas 除了能繪製圖片外，還能自行指定寬高會置縮小過的圖片。

Version

Vue 2.6.11
HTML 5

Canvas

HTML 5 Canvas 所繪製的圖片，其長寬都為原本的 50%。

<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'
  let scale = 0.5
  let width = image.width * scale
  let height = image.height * scale
  image.onload = () => context.drawImage(image, 5, 5, width, height)
}

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

13 行

let scale = 0.5
let width = image.width * scale
let height = image.height * scale

由 image.width 與 image.height 取得原圖片的寬與高。

乘以 scale 得出縮小後的值。

16 行

image.onload = () => context.drawImage(image, 5, 5, width, height)

drawImage() 的第三個 argument 傳入 width，第四個 argument 傳入 height，如此 drawImage() 則會根據指定寬高畫出縮小圖片。

Conclusion

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