Estoy tratando de capturar una captura de pantalla usando html2canvas. Pero solo crea el fondo.

Creo que es porque estoy usando linear-gradient para background y -webkit-background-clip .

¿Cómo puedo tomar una captura de pantalla adecuada?

 <style> @import url('https://fonts.googleapis.com/css?family=Monoton'); html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: "Monoton", Helvetica, sans-serif; letter-spacing: 5px; text-align:center; } .container { background: #ab3428; display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; padding: 20px; } h1 { display: inline; font-size: 20px; line-height:1.5; color: #000000; color: transparent; background: linear-gradient(7deg, #f5ee9e 50%, #000000 0); -webkit-background-clip: text; } #btnSave{ text-align: center; position: fixed; top: 0; width: 150px; z-index: 100; } .download-btn{ font-size: 12px; padding: 5px; border: 2px solid rgb(33, 33, 33); margin: 10px; } </style> <button class="download-btn" id="btnSave">Download Image</button> <div class="container"> <h1>TEST</h1> </div> <div id="img-out"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> $(function () { $("#btnSave").click(function () { window.scrollTo(0, 0); html2canvas($(".container")[0]).then(function (canvas) { $("#img-out").append(canvas); }); }); }); </script>

Este es mi enlace jsfiddle: https://jsfiddle.net/shinokada/cxnh81f4/55/