我正在創建一個預訂參考供用戶在成功預訂后下載。在瀏覽器中看起來像這樣：
但是，在使用 html2canvas 在 React 中獲取組件的螢屏截圖后，我得到了這個：
我懷疑這個問題與靜態地圖的使用受 API 密鑰保護這一事實有關，導致在外部視圖中呈現影像時出現問題。
這是點擊分享按鈕時觸發的回呼，現在只下載 png（然后使用 jsPDF 將其轉換為 pdf）：
const share = () => {
const input = document.getElementById("trip-summary");
if (input === null) return;
html2canvas(input!).then((canvas) => {
var image = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
const pdf = new jsPDF();
// @ts-ignore
pdf.addImage(image, "PNG", 0, 0);
pdf.save("download.pdf");
});
};
uj5u.com熱心網友回復：
它看起來像是內容的外部來源。您應該將allowTaint選項設定為true.
html2canvas(input, { allowTaint: true }).then(...);
uj5u.com熱心網友回復：
只是想添加到上面的答案。
它完全實作了我想要的，但您只需要在選項中將 useCORS 設定為 true
html2canvas(input!, { allowTaint: true, useCORS: true }).then(...)
，否則你會得到
未捕獲的安全錯誤：無法在“HTMLCanvasElement”上執行“toDataURL”：可能無法匯出受污染的畫布。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/523927.html
下一篇：設定新路線時路線未清除