photo of canvas buggy

Asked

Viewed 978 times

-1

The picture doesn’t show anything black or all white. inserir a descrição da imagem aqui

code:

<!--Start of Tawk.to Script-->
<script type="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

  • 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)

  • @Denybanner further develop your question, describing the behavior and expected and where you are having difficulties

1 answer

0

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)

Thus:

<!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>
        <script src='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 websites, you need to set { allowTaint:true }.

If your image is being uploaded from an external website, you may have problems with the CORS

When you try to upload and print with canvas in an external image, for example https://data.whicdn.com/images/132927354/large.jpg, you will have a security error while trying to capture the information with toDataURL.

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

¹ Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Browser other questions tagged canvas

You are not signed in. Login or sign up in order to post.