html2canvas(document.body) 生成錯誤 - “加載圖像時出錯”

Question

我正在嘗試使用 html2canvas 截取屏幕截圖，但出現錯誤“加載圖像時出錯”。

我的代碼相當簡單 -

 function SaveScreenshot() {
            html2canvas(document.body).then(canvas => {

                var image = canvas.toDataURL('image/webp');

                try {
                    localStorage.setItem("img1", image);
                }
                catch (e) {
                    console.log("Storage failed: " + e);
                }

            });
            return false;
        }

你可以自己試試。 轉到 - https://bengurion.azurewebsites.net/gallerynew使用攝像頭按鈕拍攝網絡攝像頭（或不這樣做。這並不重要）。 按漢堡包按鈕轉到菜單。 轉到圖庫按鈕（看起來像 4 張圖片，里面有人物）。

這是調用該函數的按鈕。

請協助。

Answer 1

我不太確定您為什么使用“image/webp”MIME 類型，但它僅受 chrome 支持。 我想你可以嘗試這樣的事情。 很常見的截屏方式。

 function SaveScreenshot() {
            html2canvas(document.body).then(canvas => {

                const base64Image = canvas.toDataURL('image/jpeg', 1);

                try {
                    localStorage.setItem("img1", base64Image);
                }
                catch (e) {
                    console.log("Storage failed: " + e);
                }

            });
            return false;
        }