html2canvas 將 div 轉換為 canvas 然后轉換為圖像

Question

我想將 div 轉換為 canvas，然后最終轉換為圖像。 所以我正在使用 html2canvas 庫。 我已經嘗試下載圖像，在新的 window 中打開圖像，並附加到一個 div，但它們都沒有奏效。

 $(document).ready(function (e) { $("#final_download").click(function() { html2canvas($("#final_image_div")[0]).then(function (canvas) { console.log(canvas); var myImage = canvas.toDataURL("image/png"); // download the generated image downloadURI(myImage, "final_image.png"); // Open the image in a new window window.open(myImage, "_blank"); // display it in div $("#bottom").append(myImage); }); }); });

 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script> <div id="final_image_div">abcdef</div> <img src="images/download.jpg" id="final_download"> <div class="bottom"></div>

關於我在這里做錯了什么的任何想法？

Answer 1

我試圖運行你的代碼，它只是缺少一個dowloadURL function （Vanilla JS 中沒有這樣的東西）。

我只是添加了以下代碼，然后一切都按預期工作：

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

僅供參考，我在這里找到了這個 function