html2canvas 在 Safari 浏览器中不起作用：截屏答案

【问题标题】：html2canvas is not working in Safari browser: Taking Screenshothtml2canvas 在 Safari 浏览器中不起作用：截屏
【发布时间】：2022-01-24 21:20:17
【问题描述】：

我只想截取任何 HTML 元素的屏幕截图（在我的例子中是“容器”div）。它在 Chrome 和 Firefox 浏览器中运行良好，但在 Safari 中却不行。

以下是我的做法：

<!doctype HTML>
<HTML>
<head>
    <script type="text/javascript" src="assets/HTML_canvas/html2canvas.js"></script>
</head>
<body>
<h1>Take screenshot of webpage with html2canvas</h1>
<div class="container" id='container' >
    <div style="background-color: blue; height: 50px; width: 50px;">DIV 1</div>
    <div style="background-color: red; height: 50px; width: 50px;">DIV 2</div>
    <div style="background-color: green; height: 50px; width: 50px;">DIV 3</div>
</div>

<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

<!-- Script -->
<script type='text/javascript'>
    function screenshot(){
        html2canvas(document.getElementById('container')).then(function(canvas) {
            document.body.appendChild(canvas);
        });
    }
</script>

</body>
</html>

它在 Safari 浏览器中显示以下错误：

这里是 html2canvas.js 代码的特定部分（这是我刚刚使用的默认文件）。

【问题讨论】：

您的示例中没有 jQuery + How do I ask a good question? -> "描述问题。“它不起作用”的描述性不足以帮助人们了解您的问题。相反，告诉其他读者预期的行为应该是什么。告诉其他读者错误消息的确切措辞是什么，以及产生它的代码行。"
尝试查看控制台是否有错误。
是的，Safari 控制台显示错误，我忘了在问题中提及它。它在 html2canvas.js 中在线显示“ReferenceError: Can't find variable: Promise”：*
这能回答你的问题吗？ Can't find variable: Promise on Safari
"ReferenceError: Can't find variable: Promise" - 自 9 月 2014 起 Safari 支持 Promises -> caniuse.com/promises o.O

标签： javascript screenshot html2canvas

【解决方案1】：

我们只需要在 safari-mac 浏览器中启用 CORS。因此，我们将通过修改我们的函数screenshot() 来做到这一点，如下所示：

function screenshot(){
    html2canvas(document.getElementById('id-screenshot'),{
        allowTaint: true,
        useCORS : true,
    }).then(function(canvas) {
        console.log("canvas: " + canvas);
        document.getElementById('test-s').appendChild(canvas);
    });
}

【讨论】：