ShangHaiInustrialMuseum/src/components/TreasureShare.vue

<template>
  <div class="treasure-share">
    <article ref="article">
      <button
        class="close"
        @click="$emit('close')"
      />
      <h2 title="万吨水压机">
        {{ info.name }}
      </h2>
      <img
        class="splitter"
        src="@/assets/images/splitter.png"
        alt=""
        draggable="false"
      >
      <img
        class="photo"
        :src="`${prefix}${info.thumb}`"
        alt=""
        draggable="false"
      >
      <div
        class="txt"
        v-html="info.description"
      />
      <div class="QRCode">
        <img
          v-show="qrcodeDataUrl"
          class=""
          :src="qrcodeDataUrl"
          alt=""
          draggable="false"
        >
      </div>
      <button
        v-if="!isSaving"
        class="download"
        @click="onClickDownload"
      >
        <img
          class="download"
          src="@/assets/images/download-from-cloud.png"
          alt=""
          draggable="false"
        >
        <span>保存图片</span>
      </button>
    </article>
    <a
      v-show="false"
      ref="forDownload"
      :href="aDownloadHref"
      download="share.jpg"
    />
  </div>
</template>

<script>
import QRCode from 'qrcode'
import { ref, nextTick } from "vue"
import html2canvas from "html2canvas"

export default {
  props: {
    info: {
      type: Object,
      required: true,
    }
  },
  setup(props) {
    const prefix = process.env.VUE_APP_API_ORIGIN

    const qrcodeDataUrl = ref(null)
    QRCode.toDataURL(location.href).then((url) => {
      qrcodeDataUrl.value = url
    })

    const article = ref(null)
    const forDownload = ref('')
    const aDownloadHref = ref(null)
    const isSaving = ref(false)
    const onClickDownload = utils.throttle(function() {
      isSaving.value = true
      nextTick(() => {
        // #capture 就是我们要获取截图对应的 DOM 元素选择器
        html2canvas(article.value, {
          useCORS: true, // 【重要】开启跨域配置
          scale: 1,
          allowTaint: true, // 允许跨域图片
          preserveDrawingBuffer: true,
        }).then((canvas) => {
          aDownloadHref.value = canvas.toDataURL('image/jpeg', 1.0)
          nextTick(() => {
            forDownload.value.click()
            isSaving.value = false
          })
        })
      })
    })

    return {
      prefix,

      qrcodeDataUrl,

      article,
      forDownload,
      aDownloadHref,
      isSaving,
      onClickDownload,
    }
  },
}

</script>

<style lang="less" scoped>
.treasure-share {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  >article {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 717px;
    height: 83.7%;
    background-image: url(@/assets/images/general-article-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    padding: 32px 50px 50px 50px;
    display: flex;
    flex-direction: column;
    background-color: rgba(40, 47, 58, 0.7);
    backdrop-filter: blur(50px);
    >button.close {
      position: absolute;
      top: 30px;
      right: 50px;
      width: 32px;
      height: 32px;
      background-image: url(@/assets/images/icon-close.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    >h2 {
      flex: 0 0 auto;
      font-size: 30px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 21px;
      overflow: hidden;
      white-space: pre;
      text-overflow: ellipsis;
    }
    >img.splitter {
      flex: 0 0 auto;
      width: 100%;
      margin-bottom: 37px;
    }
    >img.photo {
      flex: 0 0 auto;
      width: 100%;
      height: 43%;
      object-fit: contain;
      margin-bottom: 32px;
    }
    >.txt {
      flex: 1 0 1px;
      font-size: 20px;
      font-family: Source Han Sans CN-Light, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.5;
      overflow: auto;
      margin-right: -10px;
      padding-right: 10px;
      margin-bottom: 32px;
      text-indent: 2em;
      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
      &::-webkit-scrollbar-thumb {
        background: rgba(220, 231, 240, 0.2);
        border-radius: 2px;
      }
    }
    >.QRCode {
      height: 100px;
      >img {
        float: right;
        width: 100px;
        height: 100%;
        object-fit: contain;
      }
    }
    >button.download {
      position: absolute;
      bottom: 44px;
      right: calc(-46px - 149px);
      width: 149px;
      height: 46px;
      background: rgba(255,255,255,0.2);
      border: 1px solid #FFFFFF;
      border-radius: 23px;
      >img.download {
        width: 32px;
        margin-right: 8px;
        vertical-align: middle;
      }
      >span {
        font-size: 16px;
        color: #FFFFFF;
        vertical-align: middle;
      }
    }
    @media only screen and (max-width: 1110px) {
      >button.download {
        right: initial;
        left: 50px;
      }
    }
  }
}
</style>