html2canvas实现网页截屏

最新推荐文章于 2024-03-18 16:07:20 发布
Zwq8023520
最新推荐文章于 2024-03-18 16:07:20 发布
阅读量359
点赞数
文章标签： javascript 前端开发语言
本文链接：https://blog.csdn.net/Zwq8023520/article/details/133811062
版权
<template>
  <div class="body">
    <div
      class="draggable-button"
      :style="{ top: top + 'px', left: left + 'px' }"
      @mousedown="startDrag"
      @touchstart="startDrag"
      @mousemove="moveDrag"
      @touchmove="moveDrag"
      @mouseup="stopDrag"
      @touchend="stopDrag"
      @click="handleClick"
    >
      <slot><van-icon name="debit-pay" /></slot>
    </div>
    <div class="top"></div>
    <div class="middle" ref="captureElement">
      <div class="company-logo">
        <div class="logo">
          <img src="../../assets/logo.png" />
        </div>
      </div>
      <div class="main-content">
        <div class="main-top">
          <div class="card-header">
            <div class="card-name">
              <van-popover
                v-model="showPopover1"
                trigger="click"
                :offset="[0, 8]"
              >
                <p
                  style="
                    font-size: 6px;
                    line-height: 20px;
                    width: 100px;
                    text-align: center;
                  "
                >
                  {{ cardINfo.cardTitle[0] }}
                </p>
                <template #reference>
                  <p class="card-name-name">
                    {{ cardINfo.cardContent[0] }}
                  </p>
                </template>
              </van-popover>

              <p class="depart">{{ cardINfo.cardContent[1] }}</p>
            </div>
            <div class="card-avatar">
              <div class="avatar">
                <van-image
                  round
                  width="2.3rem"
                  height="2.3rem"
                  :src="img11"
                  crossorigin="anonymous"
                />
               
               
              </div>
              <div class="command"></div>
            </div>
          </div>
          <div class="card-icon">
            <img src="../../assets/gzh.png" alt="" />
          </div>
          <div class="card-content">
            <div class="common">
              <img src="../../assets/wangluo.svg" alt="" />
              <p>网址</p>
              <p class="common1">
                <a href="">  </a>
              </p>
            </div>
            <div class="common">
              <img src="../../assets/dianhua.svg" alt="" />
              <p>{{ cardINfo.cardTitle[2] }}</p>
              <p class="common1">
                <a :href="'tel:' + cardINfo.cardContent[2]">{{
                  cardINfo.cardContent[2]
                }}</a>
              </p>
              <img
                src="../../assets/phone1.png"
                alt=""
                @click="callPhoneNumber"
                style="margin-left: 3px; margin-top: -1px"
                class="iphone"
              />
            </div>
            <div class="common three">
              <img src="../../assets/youxiang.svg" alt="" class="email" />
              <p>{{ cardINfo.cardTitle[3] }}</p>
              <p class="common1">
                {{ cardINfo.cardContent[3] }}
              </p>
            </div>
            <div class="common" @click="Dh">
              <img src="../../assets/shouye.svg" alt="" class="fz" />
              <p class="address1">地址</p>
              <div class="address">
                
              </div>
            </div>
          </div>
        </div>
        <div class="main-advertise">
          <img src="../../assets/text.png" alt="" class="text" />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-line"></div>
      <div class="bottom-button">
        <div class="one">
          <img
            src="../../assets/shu.svg"
            alt=""
            @click="$router.push('/company?type=0')"
          />
          <p>公司简介</p>
        </div>
        <div class="two" @click="$router.push('/product1?type=0')">
          <img src="../../assets/icon_xinyong_xianxing_jijin-129.svg" alt="" />
          <p>产品介绍</p>
        </div>
        <div class="three" @click="goToCom">
          <img src="../../assets/jingmeijianzhan.svg" alt="" />
          <p>公司网站</p>
        </div>
        <div class="five" @click="generateImage">
          <img src="../../assets/share.svg" alt="" class="share" />
          <p>名片分享</p>
        </div>
        <div class="four" @click="Dh">
          <img src="../../assets/address2.svg" alt="" />
          <p>地图位置</p>
        </div>
      </div>
    </div>
    <van-overlay :show="show1" @click="show1 = false">
      <div class="wrapper">
        <div class="block">
          <div>
            <div v-if="qrcodeDataUrl" class="qrcode">
              <img :src="qrcodeDataUrl" alt="QR Code" />
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="imgShow" @click="imgShow = false">
      <div class="wrapper">
        <div class="block1">
          <img :src="this.screen" alt="" />
        </div>
      </div>
    </van-overlay>
    <!-- <div class="cardList" @click="$router.push('/card')">名片夹</div> -->
    <div class="split"></div>
    <van-overlay :show="show2" @click="show2 = false">
      <div class="wrapper" @click="show2 = false">
        <div class="block">
          <p class="name">
            {{ cardINfo.cardContent[0] }}
          </p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import html2canvas from 'html2canvas'
import { getCard, getSignature, getCardInfo } from '@/api/index'
import QRCode from 'qrcode'

export default {
  data() {
    return {
      dragging: false,
      img11:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      startLeft: 0,
      startTop: 0,
      left: 290,
      top: 470,
      touchStarted: false,
      cardINfo: {
        cardId: 0,
        cardTitle: ['名称', '职位', '电话', '邮箱'],
        cardContent: []
      },
      screen: '',
      imgShow: false,
      showPopover: false,
      img: require('@/assets/ava.jpg'),
      avatar: '',
      showPopover1: false,
      show: false,
      headIma: '',
      qrcodeDataUrl: null,
      text: '',
      display: false,
      show1: false,
      show2: false,
      display1: false,
      color: false,
      authName: ''
    }
  },
  methods: {
    goHome() {
      this.$router.push('/card')
    },
    startDrag(event) {
      const clientX = event.clientX || event.touches[0].clientX
      const clientY = event.clientY || event.touches[0].clientY

      this.dragging = true
      this.startLeft = clientX - this.left
      this.startTop = clientY - this.top

      if (event.type === 'mousedown') {
        event.preventDefault()
      }
    },
    moveDrag(event) {
      if (this.dragging) {
        const clientX = event.clientX || event.touches[0].clientX
        const clientY = event.clientY || event.touches[0].clientY

        this.left = clientX - this.startLeft
        this.top = clientY - this.startTop
      }
    },
    stopDrag() {
      this.dragging = false
    },
    handleClick() {
      if (!this.dragging) {
        this.goHome()
      }
    },
    generateImage() {
      this.$nextTick(() => {
        this.imgShow = true
        
        const elementToCapture = this.$refs.captureElement
        console.log(elementToCapture)

       
        html2canvas(elementToCapture, { scale: 2, useCORS: true }).then(
          (canvas) => {
          
            const dataUrl = canvas.toDataURL('image/png')
            this.screen = dataUrl

          
          }
        )
      })
    },
    toCardBox() {
      window.location.href = localStorage.getItem('FontAddress') + '/card'
    },
   
    setting() {
      this.$router.push({
        name: 'setting', // 目标页面的名称
        params: {
          id: localStorage.getItem('cardId') // 将 id 作为参数传递给目标页面
        }
      })
    },
    async signW() {
      const res = await getSignature({
        url: window.location.href
      })
      window.wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appid, // 必填，公众号的唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
      })
      window.wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        console.log('成功')
        const cardIdWx = localStorage.getItem('cardId')
        window.wx.updateAppMessageShareData({
          title: 'vCard分享', // 分享标题
          desc: '快来认识新朋友吧', // 分享描述
          link:
            localStorage.getItem('FontAddress') +
            '/lookHome?cardId=' +
            cardIdWx, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: localStorage.getItem('EndAddress') + '/image/logo.jpg', // 分享图标
          success: function () {
            // 设置成功
            console.log('分享成功')
          }
        })
      })
      window.wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('失败')
      })
    },
    toURLGo(val) {
      window.location.href = this.funData.funData[val].value
    },
    Dh() {
      window.location.href =
        'https://www.amap.com/search?id=B0FFK0FR9H&city=120111&geoobj=117.115175%7C39.094709%7C117.130035%7C39.101029&query_type=IDQ&query=%E5%A4%A9%E6%B4%A5%E5%A4%AA%E6%9E%81%E9%A3%8E%E6%8E%A7%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&zoom=17'
    },
    pop() {
      this.display1 = !this.display1
    },
    callPhoneNumber() {
      window.location.href = `tel:${this.tableData.tableData[3].value}`
    },
    showHiddenInfo() {
      this.showFullText = !this.showFullText
    },
    generateQRCode() {
      this.display = !this.display
      this.show1 = !this.show1
      const cardId = localStorage.getItem('cardId')
      const FontAddress = localStorage.getItem('FontAddress')
      this.text = FontAddress + '/lookHome?cardId=' + cardId
      if (this.text) {
        // 使用qrcode库生成二维码
        QRCode.toDataURL(this.text, { width: 200 })
          .then((url) => {
            this.qrcodeDataUrl = url
          })
          .catch((err) => {
            console.error('生成二维码失败:', err)
            this.qrcodeDataUrl = null
          })
      } else {
        this.qrcodeDataUrl = null
      }
    },
    add() {
      this.show = !this.show
    },
    skipUrl(val) {
      if (val === 1) {
        window.location.href = this.tableData.one
      } else if (val === 2) {
        window.location.href = this.tableData.two
      } else if (val === 3) {
        window.location.href = this.tableData.three
      } else if (val === 4) {
        window.location.href = this.tableData.four
      } else if (val === 5) {
        window.location.href = this.tableData.five
      }
    },
    goToCom() {
      window.location.href = ''
    },
    async getCardDetail(val, index) {
      const cardId = localStorage.getItem('cardId')
      const res = await getCard({
        cardId: cardId
      })
      if (res != null) {
        const authName = res.authName
        if (authName != null) {
          this.color = true
          this.authName = authName
        }
        const cardContent = res.cardContent
        const functContent = res.functContent
        const EndAddress = localStorage.getItem('EndAddress')
        this.avatar = EndAddress + '/cardImg/' + res.cardImg
        if (cardContent != null) {
          const obj = JSON.parse(cardContent)
          this.tableData = obj
        }
        if (functContent != null) {
          const objFunt = JSON.parse(functContent)
          this.funData = objFunt
        }
      }
    },
    generateRandomPhoneNumber() {
      const prefix = Math.floor(Math.random() * 90) + 10 // 生成三位数的前缀
      const suffix = Math.floor(Math.random() * 9000) + 1000 // 生成四位数的后缀

      return `1${prefix}****${suffix}`
    },
    // 在methods里面定义一个方法
    getQueryString(variable) {
      const index = window.location.href.indexOf('?') // 获取地址栏路径并进行分割
      const query = window.location.href.substr(
        index + 1,
        window.location.href.length
      )
      const vars = query.split('&')
      for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return false // 如果没有参数就返回false 值，就不会出现上边报错的情况了
    }
  },
  async mounted() {
    const cardId = localStorage.getItem('cardId')
    const res = await getCardInfo({ cardId: cardId })
    console.log(res)
    this.cardINfo.cardContent = JSON.parse(res.cardContent)
    console.log(this.cardINfo.cardContent)
    this.headIma =
      localStorage.getItem('EndAddress') + '/cardImg/' + res.cardImg
    if (res.isHide === 1) {
      this.cardINfo.cardContent[2] = 'www*****com'
      this.cardINfo.cardContent[3] = this.generateRandomPhoneNumber()
      this.cardINfo.cardContent[4] = '***@163.com'
    }
  },
  computed: {
    nameClass() {
      return this.showFullText ? 'name expanded' : 'name'
    }
  }
}
</script>
<style scoped lang="scss">
a {
  color: black;
}
.draggable-button {
  /* ... */
  position: fixed;
  background-color: #abafb3;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  user-select: none;
}
.address1 {
  white-space: nowrap;
  //   margin-left: -2px;
}
.address {
  display: flex;
  flex: 1;
  //   font-size: 6px;
  height: inherit;
  margin-left: 5px;
  width: 60vw;
  word-wrap: break-word;
  font-size: 12px;
  margin-top: 0px;
  padding: 0;
}
.block {
  left: 23%;
  position: relative;
  top: 33vh;
}
.block1 {
  left: 19%;
  position: relative;
  top: 33vh;
  img {
    width: 60vw;
  }
}
.body {
  font-family: 'Heiti SC';
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Heiti SC';
  background-image: url('../../../static/bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.top {
  width: 100vw;
  height: 22vh;
  display: flex;

  margin-top: 1vh;
}

.middle {
  width: 100vw;
  height: 49vh;
  display: flex;
  flex-direction: column;
  // background-color: green;
  margin-top: 1vh;
  /* justify-content: center; */
  align-items: center;
}

.company-logo {
  width: 80vw;
  margin-left: -30px;
  height: 10vh;
  // border: 2px solid black;
  .logo {
    img {
      width: 40%;
    }
  }
}

.main-content {
  width: 88vw;
  height: 34vh;
  margin-top: 1vh;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

.main-top {
  width: inherit;
  height: 25vh;
  display: flex;
  flex-direction: column;
  // background-color: blue;
}

.card-header {
  width: inherit;
  height: 10vh;
  // background-color: aquamarine;
  display: flex;
  flex-direction: row;
  .card-name {
    width: 60vw;
    height: inherit;
    // background-color: blue;
    .card-name-name {
      font-size: 20px;
      line-height: 10px;
      padding-left: 20px;
      letter-spacing: 10px;
      font-weight: bold;
      // padding-top: 0;
      // padding-bottom: 0;
      // margin-top: 0;
      // margin-bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 0px;
      padding-bottom: 0px;
      margin-bottom: 0px;
      height: 22px;
      line-height: 22px;
      width: 50vw;
    }
    .depart {
      font-size: 12px;
      line-height: 10px;
      padding-left: 100px;
    }
  }
}

.card-icon {
  width: inherit;
  height: 5vh;
  margin-top: 2vh;
  // background-color: pink;
  // display: flex;
  flex-direction: row;
  margin-left: -8px;
  // justify-content: end;
  img {
    width: 80px;
    margin-left: 71%;
    margin-top: -6%;
  }
}

.card-icon-icon {
  width: 10vw;
  height: inherit;
  // background-color: azure;
  margin-right: 6vw;
  text-align: center;
  // display: flex;
  float: right;
  // align-items: center;
  margin-top: -4vh;
  img {
    width: 16px;
    height: 16px;
  }
}
.card-icon-icon1 {
  width: 10vw;
  height: inherit;
  // background-color: azure;
  margin-right: -10px;
  text-align: center;
  // display: flex;
  float: right;
  // align-items: center;
  margin-top: -4vh;
  img {
    width: 16px;
    height: 16px;
  }
}

.card-avatar {
  width: 30vw;
  max-height: inherit;
  border-radius: 100%;
  // background-color: black;
  margin-top: -7vh;
  display: flex;
  .command {
    margin-top: 50px;
    /* position: absolute; */
    margin-left: -25px;
    z-index: 1;
    img {
      height: 30px;
      width: 30px;
    }
  }
}

.card-content {
  width: inherit;
  height: 10vh;
  // background-color: rgb(255, 127, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2vh;
}

.card-content {
  .common {
    width: 80vw;
    height: 2vh;
    margin-top: 0.5vh;
    // background-color: coral;
    display: flex;
    img {
      width: 16px;
      height: 16px;
      align-self: center;
      padding-right: 5px;
    }
    .iphone {
      width: 10px;
      height: 10px;
    }
    p {
      font-size: 12px;
      // line-height: 0px;
      align-self: center;
    }
    .common1 {
      margin-left: 5px;
      p {
        font-size: 12px;
        // line-height: 0px;
        align-self: center;
      }
    }
  }
}
.main-advertise {
  width: inherit;
  height: 7vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  img {
    width: 45%;
    padding-top: 1vh;
    align-self: flex-end;
    padding-right: 2vw;
  }
}

.bottom {
  width: 100vw;
  height: 14.5vh;
  display: flex;
  // background-color: green;
  margin-top: 18vh;
  flex-direction: column;
}

.bottom-line {
  width: inherit;
  height: 2.5vh;
  background-color: #0071bc;
}

.bottom-button {
  width: inherit;
  height: 9vh;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  // background-color: purple;
}

.bottom-button {
  div {
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 100%;
    box-shadow: rgba(29, 31, 32, 0.2) 0px 8px 24px;
    // background-color: black;
    display: flex;
    flex-direction: column;
    img {
      width: 30px;
      height: 30px;
      margin-top: 30px;
    }
    p {
      font-size: 6px;
      margin-top: 13px;
    }
  }
  .one,
  .two,
  .three,
  .four,
  .five {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .one {
    p {
    }
    img {
    }
  }
  .two {
    p {
    }
    img {
    }
  }
  .three {
    img {
    }
    p {
    }
  }
  .four {
    img {
    }
    p {
    }
  }
  .five {
    img {
    }
    p {
    }
  }
}
</style>