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

使用方法

項目中引入

npm install html2canvas

html代碼

//html代碼
<!-- 把須要生成截圖的元素放在一個元素容器裏,設置一個ref -->
<div class="image_tofile" ref="imageTofile">
  <!-- 這裏放須要截圖的元素,自定義組件元素也能夠 -->
</div>

<!-- 若是須要展現截取的圖片,給一個img標籤 -->
<img :src="htmlUrl">

 

js代碼

// 引入html2canvas
import html2canvas from 'html2canvas'

// 註冊組件
components: {
  html2canvas
},

data () {
  return {
    htmlUrl: ''
  }
},

mounted () {
  // 若是頁面一加載就須要生成圖片,就在mounted裏調用方法,給一個setTimeout,保證頁面元素已存在
  setTimeout(this.toImage, 500)

},
methods: {
  // 頁面元素轉圖片
    toImage () {
      // 第一個參數是須要生成截圖的元素,第二個是本身須要配置的參數,寬高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
　　　　 useCORS: true // 若是截圖的內容裏有圖片,可能會有跨域的狀況,加上這個參數,解決文件跨域問題

      }).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: formData
      }).then(res => {
        if (res.code && res.data) {
          
        }
      })
    }
}

OK 大功告成O(∩_∩)O哈哈~