Merhabalar,
html2canvas ile yazdığım küçük çaplı bir generatorde oluşan card öğesini png olarak download ettireceğim ancak screenshot işlemi yaparken çıktıya görseli dahil etmiyor.
<div class="card-container" id="widget">
<img src="<?php echo $_GET['qrcode'] ?>" />
<h3><?php echo $_GET['walletname'] ?></h3>
<p><?php echo $_GET['walletaddress'] ?></p>
<br>
</div>
<br>
<input type="button" id="btnSave" style="background-color: #231e39; color: #fff;" class="btn" value="GENERATE PNG"/>
<br>
<div id="img-out"></div>
<br>
<script type="text/javascript">$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
}); </script>
Çıktı alırken bir öğe yerine body i çıktı almayı ve allowTain özelliğini true yapmayı deneyin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test">asdasdasd</div>
<img src="https://cdn.r10.net/my/viasmm.webp" alt="">
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
window.onload = () => {
document.body.addEventListener('click',()=>{
html2canvas(document.body,{
allowTaint:true
}).then(canvas => {
document.body.appendChild(canvas)
});
})
}
</script>
</body>
</html>