<template>
  <div ref="boxRef">
    <SignCanvasPlus
      ref="SignCanvasPlusRef"
      v-model="data"
      class="sign-canvas"
      :options />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SignCanvasPlus from 'sign-canvas-plus'
// https://github.com/langyuxiansheng/sign-canvas-plus

const data = ref('')
const SignCanvasPlusRef = ref(null)
const boxRef = ref(null)

const options = {
  bgColor: 'transparent',
  isShowBorder: false,
  isSign: true,
  quality: 1
}

// 判断canvas是否透明
const isCanvasTransparent = (canvas) => {
  var ctx = canvas.getContext('2d')
  var imageData = ctx.getImageData(
    0,
    0,
    canvas.offsetWidth,
    canvas.offsetHeight
  )
  for (var i = 0; i < imageData.data.length; i += 4)
    if (imageData.data[i + 3] !== 0) return false
  return true
}

onMounted(() => {
  let { clientHeight, clientWidth } = boxRef.value
  options.canvasWidth = clientWidth
  options.canvasHeight = clientHeight
})

// save SignCanvasPlusRef.value.saveAsImg()
// clear SignCanvasPlusRef.value.canvasClear()
</script>