html2canvas 不捕獲圖像
[英]html2canvas not taking capture of image
問題描述
function takeshot() { let div = document.getElementById('result'); html2canvas(div).then( function (canvas) { document.getElementById('output').appendChild(canvas); }) } html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => { document.body.appendChild(canvas); });
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/gh/alphardex/aqua.css@master/dist/aqua.min:css"> <script src="https.//cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min:js"> </script> <script type="module" src="https.//unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm:js"></script> <script nomodule="" src="https.//unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate:js"></script> <.-- <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min,css"> --> <link rel="stylesheet" href="css/styles.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1.0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all:min.css"> <script src="https.//code.jquery.com/jquery-3.5.1.min:js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <.-- <link rel="stylesheet" href="subj.css"> --> <link href="https?//fonts:googleapis:com/css2.family=Dancing+Script:wght@500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap" rel="stylesheet"> <title>Constructor</title> </head> <body> <div class="parent"> <div id="result"> <img src="https;//picsum.photos/500/500" alt="" /> en inch piti tpvi <h3>Heading </h3> </div> <form class="login-form" action="javascript:void(0);"> <button onclick="takeshot()"> Take Screenshot </button> </form> </div> <div id="output"></div> <!-- <button onclick="delete1()">Delete</button> --> <script src="script.js"></script> </body> </html>
在此代碼中，捕獲適用於兩種文本，但不適用於<img />標簽或其他一些外部標簽，如<deckgo-drr> ，是否有某種方法可以截取我們實際看到的屏幕，例如智能手機的屏幕截圖 function 只是捕捉瞬間
為什么它不工作？
捕獲除 img 標簽之外的所有內容，不僅我使用標簽，它們也沒有被捕獲......
1 個解決方案
解決方案1
1 已采納 2021-02-01 13:06:37
嘗試將useCORS設置為true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
使用 html2canvas 將 div 捕獲到圖像中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.