html2canvas生成图片/导出pdf 跨域的图片处理

1.html2canvas 跨域的图片绘制出来是空白的

1. 图片加属性  crossOrigin="anonymous"
2. 图片链接后加 版本号

最终为： <img crossOrigin="anonymous" src="/static/images/xxx.png?v=20201022" />

2.html2canvas 报跨域错误

Access to image at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

最近项目中有个需求时前端将页面导出为pdf，

html2Canvas(document.querySelector("#pdfDom"), {
    allowTaint: true,
}).then(function (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);
        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");
      });

这种情况下，

1. 先给图片加属性 crossOrigin="anonymous"；
2. 图片一定要加版本号，如果页面中多次使用同一张图片，切记版本号不能相同！版本号不能相同！版本号不能相同！
3. 获取图片的base64格式，并重新赋值，代码如下：
    

   // 由于 pdfBg 图片跨域，在导出为pdf的过程中报错，所以直接转为base64格式
       let $imgs = document.getElementById("pdfDom").getElementsByTagName("img");
   
       for (let index = 0; index < $imgs.length; index++) {
         let img = $imgs[index];
         
         this.promiseList[index] = new Promise((resolve, reject)=>{
           img.onload = ()=>{
             let src = this.getBase64Image(img);
   
             img.onload = ()=>{};
             img.src = src;
   
             resolve();
           }
         }) 
       }
   
   
       Promise.all(this.promiseList).then(()=>{
         setTimeout(()=>{
           this.exportPDF();
         }, 2000);
       });