( Html2Canvas & jsPDF ) 为什么用 chrome 剪切图像？（在 safari 中不会被切断。）答案

【问题标题】：( Html2Canvas & jsPDF ) why image cut in chrome ?? (It is not cut off in safari.)( Html2Canvas & jsPDF ) 为什么用 chrome 剪切图像？（在 safari 中不会被切断。）
【发布时间】：2022-01-31 02:07:16
【问题描述】：

我正在尝试在 react.js 中转换几十个 A4 大小的页面

我使用 html2canvas & jsPDF & sunEditor

在 Chrome 中，它根据 Scale 1 被裁剪到大约 15 页。（Scale 2：8 页）

(我认为是内存溢出问题。)

但是在Safari中是正常输出的。

我会在底部附上代码和图片。

任何善意的建议将不胜感激。

const targetDom = this.contentRef.current; 
// var copyDom = targetDom.cloneNode(true);
// document.body.appendChild(copyDom);
 

let option = { 
    scale : 1,
    allowTaint: true,
    backgroundColor:null,
    useCORS: true,   
    logging : true,  
};
let pdf = new jsPDF('p', 'mm', 'a4')
let canvas = pdf.canvas; 
canvas.width = a4Width; 
await html2canvas(targetDom, option).then ( function (canvas) { 
    
let imgData = canvas.toDataURL("image/png", 2.0);
        let ctx = canvas.getContext('2d');    
    
        let width = 0
        for(j = 0; j < len ; j++) { 
            pdf.setPage(j+1);
            console.log('JPEG', width, -1 *(a4Height + margin)* j,width + a4Width, (a4Height + margin)*len - margin) 
            pdf.addImage(imgData, 'png', width, -1 *(a4Height + margin)* j, width + a4Width, (a4Height + margin)*len - margin,  undefined, 'slow' );
            if(j < len-1)pdf.addPage(); 
        }  
        pdf.save(`${title}.pdf` );
        // copyDom.remove();
        let link = document.createElement('a');
        link.download = 'browser.png';
        link.href = imgData;
        document.body.appendChild(link);
        link.click();
        link.remove(); 
    } 
)

在 chrome 图片下

在 Safari 图片下

【问题讨论】：

标签： javascript reactjs out-of-memory jspdf html2canvas

【解决方案1】：

我突然遇到了同样的问题，问题似乎是由于语法上的 chrome 扩展（可能是最近的更新）。

这是 Github 问题链接，

https://github.com/niklasvh/html2canvas/issues/2804

希望这会有所帮助。

【讨论】：