canvas photo bugged

Question

canvas photo bugged

Navigation

#1 by (0 votes)

-1

The photo does not appear anything is all black or all white.

code:

<!--StartofTawk.toScript--><scripttype="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5a6b798cd7591465c7072026/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<?php 
$link = $_POST['linkne'];
$nome  = $_POST['nome'];
echo $link;
echo $nome;
?>

<style>
BODY {

margin:0px; padding:0px;    
}
.logo {

width:100%;
max-width:1051px;
height:161px;

}
form {
font-size:20px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;

}
input {
    background-color: #09F; 
    padding:20px;
    max-width:400px;
    color:black;
    border-radius:20px;
    border-right-color:red; 
    border-right-style:solid;
    cursor:hover;
    outline:0;
    font-size:15px;
    font-weight:bold;

    box-shadow:1px 1px 30px black;
}
.nomeEmpresa {
    font-family:Georgia, "Times New Roman", Times, serif;
    width:100%;
    max-width:1051px;
    font-size:70px;
    text-shadow: 1px 1px 1px red;
    text-transform:uppercase;
    height:161px;

    }
    h1 {
        margin-top:-150px;
    }



</style>    


        <div id='tiraafotomisera' style='height:300px; width:100%; margin-top:-60px;  ' >   
<CENTER class='clay'><img src='<?php echo $link; ?>' class='fundo' /><div class='logo'><br><div class='nomeEmpresa' style='position:absolute;'><?php echo $nome; ?></div></div></CENTER>
        </div>






<script   src="https://code.jquery.com/jquery-3.2.1.js"integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="   crossorigin="anonymous"></script>
<script>
$('.nomeEmpresa').attr('style','position:absolute; margin-top:-200px');
$('.fundo').attr('style',' width:100%;height:300px;');

</script>
<h2>CLIQUE COM O LADO DIREITO DO SEU MOUSE NA IMAGEM ABAIXO, E LOGO APÓS CLIQUE EM: [SALVAR IMAGEM COMO]</h2>
<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>

<script>
html2canvas(document.querySelector("#tiraafotomisera")).then(canvas => {
    document.body.appendChild(canvas)
});
$('h2').attr('style','font-weight:bold;font-family:Verdana, Geneva, sans-serif; text-shadow:1px 1px 10px yellow; ');


</script>
<a href='' class='linkao' >CLIQUE AQUI PARA BAIXAR A IMAGEM</a>
<script>
canvas = document.createElement('canvas');
url = canvas.toDataURL('image/png');
$('.linkao').attr('href',url);
$('.linkao').attr('download','af');
</script>

canvas

asked by anonymous 27.01.2018 / 04:57

1 answer

Problem with Responsive Image Direct information exchange between Android and Desktop [closed]

score 0 · Answer 1

The problem is that you are using canvas.toDataURL('image/png'); with an "empty" variable. You need to implement this code after document.body.appendChild(canvas)

This way:

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>

        <div id='tiraafotomisera' style='height:300px; width:100%; margin-top:-60px;  '>
          <CENTER class='clay'><img src='img/ss.jpg' class='fundo' />
            <div class='logo'><br>
              <div class='nomeEmpresa' style='position:absolute;'>Simone Simons</div>
            </div>
          </CENTER>
        </div>


        <h2>CLIQUE COM O LADO DIREITO DO SEU MOUSE NA IMAGEM ABAIXO, E LOGO APÓS CLIQUE EM: [SALVAR IMAGEM COMO]</h2>


        <a href='' class='linkao'>CLIQUE AQUI PARA BAIXAR A IMAGEM</a>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc='https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.9/html2canvas.min.js'></script><script>$('.nomeEmpresa').attr('style','position:absolute;margin-top:-200px');$('.fundo').attr('style','width:100%;height:300px;');html2canvas(document.querySelector("#tiraafotomisera"), { allowTaint:true }).then(canvas => {
              document.body.appendChild(canvas);
              url = canvas.toDataURL();
              $('.linkao').attr('href',url);
              $('.linkao').attr('download','af');
            });

            $('h2').attr('style', 'font-weight:bold;font-family:Verdana, Geneva, sans-serif; text-shadow:1px 1px 10px yellow; ');
        </script>
    </body>
</html>

To upload images from external sites, you need to set { allowTaint:true } .

If your image is loading from an external site, you may have problems with CORS

When you try to load and print with canvas on an external image, for example link , you will have a security error when trying to capture information with toDataURL .

This protection prevents users from having private data exposed using images to extract information from remote sites without permission¹.

¹ Reference: link