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