Html2Canvas和Canvas2Image在頁面上不起作用

Question

我有以下簡單代碼將html保存為圖像：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script src="js/jquery.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/canvas2image.js"></script>
    <script>
        $('#save').click(function () {
            var elem = $('#element').get(0);
            var leba = "600";
            var ting = "400";
            var type = "bmp";
            var name = "temp"
            html2canvas(elem).then(function (canvas) {
                var cWidth = canvas.width;
                var cHeight = canvas.height;
                var img = Canvas2Image.convertToImage(canvas, cWidth, cHeight);
                $('#preview').after(img);
                Canvas2Image.saveAsImage(canvas, leba, ting, type, name);

            })
        })
    </script>
    <div id="element"
        style="width: 600px; height: 450px; background-color: aquamarine; margin: 30px auto; text-align: center">
        <h1>Screenshot</h1>
        <input type="text" style="background-color: aliceblue; border: 1px solid #aaaaaa; color: #333333">
    </div>
    <div style="text-align: center">
        <button id="save">Salva</button>
        <p id="preview"></p>
    </div>
</body>
</html>

我想要預覽屏幕截圖並單擊保存，但是單擊時什么也沒有發生。

包含三個腳本的三個文件已正確加載，我使用的是Visual Studio代碼，並且鏈接正確，但是盡管嘗試了，但仍無法獲取圖像。

我也嘗試直接放置js鏈接，但是沒有成功，我將腳本直接移動到HTML標記中（我知道它沒有用），但是我的頁面沒有任何結果。

Answer 1

要將畫布另存為圖像，可以進行以下更改。 我不這么認為，您需要一個庫來保存文件。

html2canvas(document.querySelector("#element")).then(function (canvas) {
    var dataURL = canvas.toDataURL("image/jpeg", 1.0);
    var a = document.createElement('a');
    a.href = dataURL;
    a.download = 'untitled.jpeg';
    document.body.appendChild(a);
    a.click();
})

對於完整的參考，您可以訪問下面添加的CodePen鏈接

https://codepen.io/mukeshmohan/pen/ymvQjV

並且建議將您的代碼包裝在文檔中。

$( document ).ready(function() {
   // your script goes here
});

這將使jquery等待dom渲染完成，從而允許安全干凈的事件處理。

Answer 2

您需要將代碼包裝在

$( document ).ready()

塊

在這里看看

Html2Canvas和Canvas2Image在頁面上不起作用

問題描述

2 個解決方案

解決方案1
0 2019-08-07 11:09:33

解決方案2
0 2019-08-07 11:14:41

Html2Canvas和Canvas2Image在頁面上不起作用

問題描述

2 個解決方案

解決方案1 0 2019-08-07 11:09:33

解決方案2 0 2019-08-07 11:14:41

解決方案1
0 2019-08-07 11:09:33

解決方案2
0 2019-08-07 11:14:41