drawing-board

Installation

npm install vue3-drawing-board

Usage

# main.js
...
import DrawingBoard from 'vue3-drawing-board'
...
createApp(App)
  .use(DrawingBoard)
  .mount('#app')

In page

<template>
  <div class="test">
    <DrawingBoard ref="board" />
    <button type="button" @click="revoke">撤销</button>
    <button type="button" @click="clear">清除</button>
    <button type="button" @click="getImg">获取图片</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const board = ref(null)
const revoke = () => {
  board.value.drawingBoard.canvasBack()
}
const clear = () => {
  board.value.drawingBoard.canvasClear()
}
const getImg = () => {
  const data = board.value.drawingBoard.canvasImg()
  console.log(data)
}
</script>