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.