<template>
  <div ref="board">
    <div>{{ $store.state.userInfo }}</div>
    <div>
      <el-cascader
        size="large"
        clearable
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
        placeholder="请选择市区"
      >
      </el-cascader>
    </div>
    <img
      data-v-bea0d8aa=""
      id="img1"
      ref="img1"
      src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/演讲视角21668660541446.jpg?v=1668838015869"
    />
    <canvas id="ctx_back" ref="ctx_back"></canvas>
    <el-button type="primary" size="default" @click="handleSave"
      >保存</el-button
    >
    <!-- <Editor></Editor> -->
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import html2canvas from "html2canvas";
// import Editor from "../tools/wangEnditor.vue";
const Data = regionData.filter((ele) => {
  return ele.value == "440000";
});
export default {
  // components: {
  //   Editor,
  // },
  data() {
    return {
      options: Data[0].children,
      selectedOptions: [], //"440000","440100"
      loc: "",
      canvas_base: null,
      ctx_base: null,
    };
  },
  methods: {
    handleChange() {
      if (!this.selectedOptions) {
        return;
      }
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      console.log(loc);
      console.log(this.selectedOptions);
      this.loc = "广东省" + loc;
    },
    handleSave() {
      // let url = this.$refs.board;
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas");
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      let canvasBox = this.$refs.board;
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
        allowTaint: true,
      };
      var a = canvasBox.getElementsByTagName("img");
      for (var i = 0; i < a.length; i++) {
        a[i].crossOrigin = "anonymous";
      }
      let _this = this;
      html2canvas(canvasBox, {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
        allowTaint: true,
      }).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.canvas_base = this.$refs.ctx_back;
      this.ctx_base = this.canvas_base.getContext("2d");
      let img = this.$refs.img1;
      let _this = this
      img.onload = function () {
        let width = parseInt(this.width);
        let height = parseInt(this.height);
        _this.canvas_base.width = width;
        _this.canvas_base.height = height;
        _this.ctx_base.drawImage(this, 0, 0, width, height);
      };
    });
    console.log(this.$store);
  },
};
</script>

<style>
</style>