html2canvas 在 Safari 浏览器中不起作用：截图

Question

我只想截取任何 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 代码的特定部分（这是我刚刚使用的默认文件）。

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

html2canvas 在 Safari 浏览器中不起作用：截图

html2canvas is not working in Safari browser: Taking Screenshot

javascript

screenshot

html2canvas