html2canvas Image Render Problemi

05-12-2021, 22:31:03

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>

05-12-2021, 22:49:10

#2

Misafir

wisex adlı üyeden alıntı: mesajı görüntüle

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>

05-12-2021, 22:53:15

#3

wisex

Misafir adlı üyeden alıntı: mesajı görüntüle

Çıktı alırken bir öğe yerine body i çıktı almayı ve allowTain özelliğini true yapmayı deneyin.

Teşekkür ederim hocam cevabınız için. Div'i almam gerekiyor hocam allowTaint:true yu kodumda nereye eklemem gerekiyor ?

05-12-2021, 23:00:35

#4

Misafir

wisex adlı üyeden alıntı: mesajı görüntüle

Teşekkür ederim hocam cevabınız için. Div'i almam gerekiyor hocam allowTaint:true yu kodumda nereye eklemem gerekiyor ?

Rica ederim hocam. Aşağıdaki şekilde kullanabilirsiniz. Vanilla js ile yazdığımdan jquery pek hatırlamıyorum. Çalışmazsa önceki mesajımdaki kodun oluşturduğu canvası png olarak çıktı almanızı tavsiye ederim.

<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);
    },
    allowTaint:true
    });
    });
    }); </script>

wisex bunu beğendi.

1 kişi bunu beğendi.