0

While converting png using html2canvas and later on I will draw that image on canvas. And I am using multiple font in html. But while converting font is not apply. So it looks different font 

  function getCanvas() {
       form.width(myPageSize).css('max-width', 'none');
       return html2canvas(form, {
           useCORS: true,
           imageTimeout: 2000,
           removeContainer: true
       });
   }
vrintle
  • 5,315
  • 1
  • 11
  • 42
Nikhil Arote
  • 11
  • 1
  • 3
  • Hello! It is always a good idea to show your code along with your question so that we can see exactly whats going on. Or, you can always link a jsfiddle too! Thanks. – Chris Oct 04 '18 at 14:21
  • Please check above code form is element I am using Arial font directly not embedded using css – Nikhil Arote Oct 05 '18 at 05:34

3 Answers3

0

actually issue is with multiple font used in html so while converting image it fails for font. Now it is gets fixed and now only using single font

Nikhil Arote
  • 11
  • 1
  • 3
0
html2canvas(element, {
   onrendered: function (canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = true;
        ctx.mozImageSmoothingEnabled = true;
        ctx.imageSmoothingEnabled = true;
        var img = canvas.toDataURL('image/png');
        console.log(img);
   }
})

I have tried this above code for my project, In this code 'element' is your html element for which you want to generate image.

Kiran Shahi
  • 6,738
  • 6
  • 35
  • 66
PSabuwala
  • 155
  • 1
  • 9
-1

this question was solved here "https://stackoverflow.com/a/51699805/15756648", or you check here for working code"" . actually you should include the font styling after the svg tag, then convert the src:url(font to base64 encode) convert the font to a base64. check the link above out. it worked for me.

Joe Joe
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 03 '22 at 18:39