<template>
  <div v-loading="loading" style="width: 650px;height: 365px">
    <canvas id="imageSign">
    </canvas>
  </div>
</template>

<script>

  export default {
    name: 'image-sign',
    data() {
      return {
        loading:false
      }
    },
    props: {
      imgUrl: {
        type: String,
        default() {
          return '';
        }
      }
    },
    created() {
      if (!window.Ypaint) {
        require('../assets/js/Ypaint')
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init(){
        this.loading=true
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous');
        image.src = this.imgUrl
        let me= this
        image.onload = function () {
          me.loading=false
          var canvas = document.getElementById("imageSign")
          canvas.width = 650;
          canvas.height = 365;
          canvas.getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);//0, 0参数画布上的坐标点，图片将会拷贝到这个地方
          let paint = Ypaint(canvas, image)
          paint.outerParams.circle.color = 'red'
          paint.outerParams.circle.lineWidth='2'
          paint.chooseCircle()
        }
        image.onerror=function () {
          me.loading=false
        }
      }
    }
  }
</script>

<style>
</style>
