shibadongcun-web/src/views/Home/shareModal.vue

<template>
  <div class="shareModal">
    <div class="shareModal-content" ref="shareImg">
      <div class="shareImg">
        <img
          style="min-height: 15.5vh"
          crossOrigin="anonymous"
          :src="`https://4dscene.4dage.com/new4dkk/v2/images/_/common/data/images/bbhhbw.c24ca41.png`"
          alt=""
        />
      </div>
      <div class="shareinfo">
        <img
          class="watermark"
          src="@/assets/images/home/watermark.png"
          alt=""
        />
        <div class="text">
          <h2>花垣县双龙镇十八洞村</h2>
          <p>山峰叠嶂，云雾缭绕 溪流潺潺，古树参天</p>
        </div>
        <div class="shareCode">
          <span>扫码下载照片</span>
          <div style="margin-top: 7px">
            <vue-qr :text="baseUrl" margin="0" :size="68"></vue-qr>
          </div>
        </div>
      </div>
      <div class="butList">
        <img class="edit" src="@/assets/images/home/edit.png" alt="" />
        <img class="down" @click="downImg" src="@/assets/images/home/down.png" alt="" />
        <img
          class="clear"
          src="@/assets/images/home/clear.png"
          @click="$store.commit('setModalState', false)"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
import vueQr from "vue-qr";
import html2canvas from "html2canvas"
export default {
  name: "feedbackModal",
  data() {
    return {
      baseUrl: "http://localhost:8080/staticData",
    };
  },
  components: {
    vueQr,
  },
  methods: {
    downImg() {
     var opts = {
           logging: false, //日志开关，便于查看html2canvas的内部执行流程
           useCORS: true // 【重要】开启跨域配置
       };
      html2canvas(this.$refs.shareImg, opts).then(canvas => {
        // 转成图片，生成图片地址
        let imgUrl = canvas.toDataURL("image/png");
        // 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.href = imgUrl; // 转换后的图片地址
        eleLink.download = "分享图片.png"; // 下载的文件名
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    }
  },
};
</script>
<style lang="less" scoped>
.shareModal {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(10, 59, 64, 0.9);
  z-index: 10;
  &-content {
    padding: 35px 35px 25px 35px;
    width: 711.6px;
    min-height: 540px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(@/assets/images/home/sharediv.png);
    background-size: 100%;
    background-repeat: no-repeat;
    // background: url(@/assets/images/home/sharediv.png) 100% 100% no-repeat;
    .shareImg {
      margin-bottom: 18px;
      img {
        height: 357px;
        width: 100%;
        object-fit: cover;
      }
    }
    .shareinfo {
      position: relative;
      display: flex;
      justify-content: space-between;
      text-align: center;
      .shareCode {
        padding: 5px 7px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
        border-radius: 10px 10px 10px 10px;
        font-weight: bold;
        font-size: 10px;
        color: rgba(143, 143, 143, 0.8);
        line-height: 12px;
        span {
          margin-bottom: 5px;
        }
      }
      .watermark {
        position: absolute;
        right: 10px;
        top: -130px;
      }
      .text {
        text-align: left;
        font-weight: 500;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
        line-height: 19px;
        letter-spacing: 3px;
        h2 {
          font-weight: 500;
          font-size: 20px;
          color: #535353;
          line-height: 23px;
          margin-bottom: 11px;
        }
      }
    }
  }
  .butList {
    display: flex;
    justify-content: space-between;
    width: 184px;
    margin: 31px auto;
    height: 30px;
    img {
      cursor: pointer;
    }
  }
}
</style>