【 VUE 】 vue html 2 canvas 캡 처 사용

공식 문서:http://html2canvas.hertzen.com/configuration/
하루 종일 html 2 canvas 의 깊 은 구 덩이 를 밟 았 더 니, 마침내 고장 이 나 지 않 았 다.

문제: 1. 일부 http 그림 (아 리 클 라 우 드 의 그림 을 업로드 합 니 다. 왜 그런 지 모 르 겠 습 니 다. 백 엔 드 는 모두 열 려 있 지 않 습 니 다) 을 해결 할 수 없습니다. 크로스 도 메 인 문 제 를 해결 할 수 없습니다. 캔버스 에 실현 할 수 없습니다. 마지막 으로 base 64 그림 으로 전환 해 야 표시 할 수 있 습 니 다. 2. 데이터 가 모두 불 러 온 후에 setTimeout 개 300 을 실행 하고 렌 더 링 캡 처 3, 페이지 새로 고침 을 시작 합 니 다. 가끔 상단 에 흰색 변 이 나타 날 때 가 있 습 니 다.가끔 은 없어 요. backgroundColor: null (흰 테 두 리 를 제거) 에 소 용 없어 요. 마지막 에 logging: true (로그 기록) 를 더 해서 흰 테 두 리 를 나타 내지 않 았 어 요 ~ (저도 취 했 지만 사용 할 수 있 으 면 좋 겠 어 요 ~ over) 4. 렌 더 링 과정 에서 페이지 를 굴 릴 수 없어 요. 그렇지 않 으 면 완전 하지 않 아 요.저 는 페이지 오른쪽 에 고정 되 어 있 습 니 다. 렌 더 링 하기 전에 페이지 를 굴 릴 수 없 게 합 니 다.
외부 도입:

1. 설치

npm install html2canvas

2. 페이지 에 도입

 import html2canvas from 'html2canvas';

 
 

   
   

     
     {{Info.nickName}}
   
 
 
 
      

export default {
  name: 'BusinessInformation',
  data() {
    return {
      QRUrl: '',
      LOGOUrl: '',
      dataURL: ''
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    //  dom  canvas
    makeImg() {
      var that = this
      var opts = {
        logging: true, //             (           )
        allowTaint: true, //            
        backgroundColor: null, //           
        useCORS: true //            ,        
      }
      // eslint-disable-next-line no-undef
      html2canvas(that.$refs.imageWrapper, opts).then((canvas) => {
        var url = canvas.toDataURL('image/png')
        that.dataURL = url
      })
    },
    // http    base64，             
    getBase64Image(img) {
      var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var dataURL = canvas.toDataURL('image/png') //       image/jpeg
      return dataURL
    },
    main(src) {
      var that = this
      var image = new Image()
      image.src = src + '?v=' + Math.random() //     
      image.crossOrigin = '*' //       
      image.onload = function() {
        that.LOGOUrl = that.getBase64Image(image)
      }
    },
    //   html2canvas     
    uploadQR() {
      var a = document.createElement('a')
      a.href = this.dataURL
      a.download = '   '
      a.click()
    },
    //     
    async getUserInfo(params) {
      const { data } = await getInfo(params)
      this.main(data.iconUrl) //  logo    base64，           
      setTimeout(function() {
        that.makeImg() //        ，   
      }, 300)
    }
  }
}