图片生成加下载

<template>
  <div>
    <!-- 表具报停 -->
    <Drawer
      :title="type == 2 ? '表具二维码' : '表具报停'"
      :closable="false"
      v-model="DrawerShow"
      width="50%"
    >
      <div>
        <div class="t-head">
          <div>
            <span>表具编号:{{ infoObj.meterNo }}</span>
            <span>表具类型:{{ METERTYPE[infoObj.meterType] }}</span>
            <span>表具形式:{{ RECORDWAY[infoObj.recordWay] }}</span>
          </div>
          <div>
            <span>表具初始读数:{{ infoObj.degree }}</span>
            <span>安装日期:{{ infoObj.createTime }}</span>
            <span
              >预警类型:{{ infoObj.warnType ? infoObj.warnType : "/" }}</span
            >
          </div>
        </div>
        <!-- 报停 -->
        <div style="display: flex; margin-top: 20px" v-if="type == 1">
          <Form
            ref="stopFormRef"
            :model="stopForm"
            :rules="stopFormRule"
            :label-width="120"
            :label-colon="true"
            style="width: 100%"
          >
            <FormItem label="报停人" prop="reportStop">
              <Input
                style="'width:380px"
                type="text"
                maxlength="32"
                v-model="stopForm.reportStop"
                placeholder="请输入报停人"
              />
            </FormItem>
            <FormItem label="报停说明" prop="remark">
              <Input
                style="'width:380px"
                type="textarea"
                maxlength="200"
                :rows="6"
                v-model="stopForm.remark"
                placeholder="请输入报停说明"
              />
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                :disabled="btnType"
                @click="handleSubmit('stopFormRef')"
                >提交
              </Button>
              <Button @click="goBack()" style="margin-left: 8px">返回</Button>
            </FormItem>
          </Form>
        </div>
        <!-- 二维码 -->
        <div class="cont-w" v-if="type == 2">
          <div class="qrcode-img">
            <img :src="imgUrl" alt="" />
            <Button type="primary" :disabled="btnType" @click="imgdown()"
              >导出
            </Button>
            <p>注：二维码导出后，可添加到设备的表面，便于扫码查询</p>
          </div>
        </div>
        <div class="btn-box" v-if="type == 2">
          <Button @click="goBack()" style="margin-left: 8px">返回</Button>
        </div>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { addReportStop, getMeterQRCode } from "@/api/Instrumentmanagement.js";
import { formatDate } from "@/libs";
import _GLOBAL from "@/libs/config";
export default {
  components: {},
  props: {
    infoObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      METERTYPE: _GLOBAL.meterType,
      RECORDWAY: _GLOBAL.recordWay,
      DrawerShow: false,
      stopForm: {
        reportStop: "",
        remark: "",
      },
      stopFormRule: {
        reportStop: [
          {
            required: true,
            message: "请输入报停人",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入报停说明",
            trigger: "blur",
          },
        ],
      },
      btnType: false,
      // meterId: "",
      type: "",
      id_: "",
      imgUrl: "",
    };
  },
  watch: {},
  filters: {
    chengearmTime(armTime) {
      return formatDate(Number(armTime), "yyyy-MM-dd hh:mm:ss");
    },
  },
  mounted() {},
  created() {},
  methods: {
    show(row, type) {
      this.DrawerShow = true;
      this.handleReset();
      this.type = type;
      this.id_ = row.id;
      this.imgUrl =
        this.$store.state.app.getMeterQRCode +
        "?meterId=" +
        row.id +
        "&author-token-key=" +
        localStorage.getItem("token");
    },
    imgdown() {
      let src = this.imgUrl;
      let canvas = document.createElement("canvas");
      let img = document.createElement("img");
      let meterNo = this.infoObj.meterNo;
      // // 解决跨域 Canvas 污染问题
      img.setAttribute("crossOrigin", "Anonymous");
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext("2d");
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
        //将canvas转base64码，然后创建一个a连接自动下载图片
        canvas.toBlob((blob) => {
          let link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = meterNo + "二维码";
          link.click();
        }, "image/jpeg");
      };
      //将资源链接赋值过去，才能触发img.onload事件
      img.src = src;
    },
    //提交
    handleSubmit(name) {
      this.btnType = true;
      setTimeout(() => {
        this.btnType = false;
      }, 2000);
      this.$refs[name].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.stopForm);
          params.meterId = this.infoObj.id;
          addReportStop(params).then((res) => {
            if (res.data.status == 200) {
              this.$Message.success("提交成功");
              //回到列表
              this.DrawerShow = false;
              this.$emit("update");
            } else {
              this.$Modal.error({
                title: "提示",
                content: res.data.desc,
              });
            }
          });
        }
      });
    },
    //返回
    goBack() {
      this.DrawerShow = false;
      this.handleReset();
    },
    //重置
    handleReset() {
      Object.keys(this.stopForm).forEach((key) => {
        this.stopForm[key] = "";
      });
    },
  },
  destroyed() {},
};
</script>
<style lang="less" scoped>
.t-head {
  display: flex;
  justify-content: space-between;
  margin-left: 12px;
  flex-direction: column;
  div {
    display: flex;
    margin: 5px 0;
    span {
      display: flex;
      flex: 1;
    }
  }
}
.cont-w {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  .qrcode-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img {
      width: 220px;
      height: 220px;
      overflow: hidden;
    }
    button {
      margin: 25px 0;
    }
    p {
      margin: 25px 0;
    }
  }
}
</style>