使用html2Canvas、JsPDF 在页面添加网络图片报错

Question

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
  var title = this.htmlTitle
  html2Canvas(document.querySelector('#pdfDom'), {
    scale: 5, // 添加的scale 参数
    tainttest: true, //检测每张图片都已经加载完成
    allowTaint: true //允许加载跨域的图片
  }).then(function (canvas) {
    console.log(canvas)
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = contentWidth / 592.28 * 841.89
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 595.28
    let imgHeight = 592.28 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new JsPDF('', 'pt', 'a4')
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(title + '.pdf')
    })
    }
  }
}

在生成pdf,vue页面中添加图片<img :src="img" alt="">
报错：DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
该如何添加图片？

Answer 1

图片跨域了。canvas被污染了。