0

I'm trying to do a transformation about html to base64, but its not working. Can someone help me? On the first code is on a tag, this code try to make get the form values to transfer to the h3 id="testando" so I can change color, background and trying to put Font Awesome on my h3, later of this I'm trying to make my html convert to canvas and canvas convert to base64, but its not working

$(document).ready(function() {
  $("#enviar").click(function() {
    var unicode = $('#uunicode').val();
    var fonte = "Font Awesome 5 Free";
    var cor = $('#ccor').val();
    var tamanho = $('#ctamanho').val();
    $("#testando").css("color", cor);
    $("#testando").css("font-size", tamanho);
    
    html2canvas(document.getElementById("testando"), {
      allowTaint: true,
      useCORS: true
    }).then(function(canvas) {
      var anchorTag = document.createElement("a");
      document.body.appendChild(anchorTag);
      base64 = anchorTag.href = canvas.toDataURL();
      alert(base64);
    });
  });
});
   ​<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   ​<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>

   ​<p>
 ​<h3 id="testando"></h3>
   ​</p>
Lucas Mateus
  • 9
  • 1
  • 3
    Hi Lucas and welcome to SO. *It's not working* is not a good description of your problem. Please take the time to add details to your question where you can tell us exactly what it should do and what the result is. Include a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) for us to try. For more info see [how do I ask a good question](https://stackoverflow.com/help/how-to-ask). – Emiel Zuurbier Nov 03 '21 at 20:25
  • You should try stackoverflow in your language: https://pt.stackoverflow.com/ – L777 Nov 03 '21 at 20:33
  • 1
    I've done some of what Emiel Zuurbier suggested for you. Please revise further to demonstrate the problem. Also note that it's invalid to have a heading element inside a paragraph. – isherwood Nov 03 '21 at 20:33
  • 1
    This post pretty much covers everything regarding converting to base64: https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript – Martin Nov 03 '21 at 20:55
  • 1
    Does this answer your question? [How can I convert an image into Base64 string using JavaScript?](https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript) – Martin Nov 03 '21 at 20:55
  • Ok guys, will make a better description! – Lucas Mateus Nov 04 '21 at 11:29
  • @Martin The problem about my code is I wanna generate a css and from this css I get the html on that and make a base64 image, if you split the codes the jquery function works, and the htmlto64 function works too the problem is when I merge the 2 functions in a 1 jquery function – Lucas Mateus Nov 04 '21 at 11:45
  • I think your question is being misunderstood. `` to base64 is different from `` to base64. [html2canvas](https://html2canvas.hertzen.com/) renders an html element to a `` which can then be converted to base64. It's a little more powerful than just converting something that is already an image. Anyway, doing some debugging, I seem to keep getting a `cross-origin` error, even with the attribute to allow it. My suggestion is rather than using the cloudflare CDN, trying hosting the html2cavas script locally and see if that works. – PoorlyWrittenCode Nov 06 '21 at 21:07

0 Answers0