html2canvas(document.body) 生成错误 - "Error loading image"

Question

我正在尝试使用 html2canvas 截取屏幕截图，但出现错误 "Error loading image"。

我的代码相当简单 -

 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;
        }

html2canvas(document.body) 生成错误 - "Error loading image"

html2canvas(document.body) generates error - "Error loading image"

javascript

asp.net

html2canvas