在Vue項目中使用html2canvas生成頁面截圖並上傳


引入cnpm install html2canvas.

html代碼

<!-- 把需要生成截圖的元素放在一個元素容器里,設置一個ref -->
<div class="image_tofile" ref="imageTofile">
  <!-- 這里放需要截圖的元素,自定義組件元素也可以 -->
</div>
<!-- 如果需要展示截取的圖片,給一個img標簽 -->
<img :src="htmlUrl">

 js代碼

// 引入html2canvas

import html2canvas from 'html2canvas'

// 注冊組件

data() {
  return {
    htmlUrl: ''
  }
},
components: {
  html2canvas
},
methods: {
  // 頁面元素轉圖片
  toImage() {
    // 第一個參數是需要生成截圖的元素,第二個是自己需要配置的參數,寬高等
    html2canvas(this.$refs.imageTofile, {
      backgroundColor: null
    }).then((canvas) => {
      let url = canvas.toDataURL('image/png');
      this.htmlUrl = url;
      // 把生成的base64位圖片上傳到服務器,生成在線圖片地址
      this.sendUrl();
    })
  },
  // 圖片上傳服務器
  sendUrl () {
    // 如果圖片需要formData格式,就自己組裝一下,主要看后台需要什么參數
      // const formData = new FormData()
    // formData.append('base64', this.company.fileUrl)
    // formData.append('userId', 123)
    // formData.append('pathName', 'pdf')
    this.$ajax({
      url: apiPath.common.uploadBase,
      method: 'post',
      data: this.htmlUrl
    }).then(res => {
      if (res.code && res.data) {
 
      }
    })
  }
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM