Html2Canvas problems with thai language

Question

Run this code and then 'save' you will difference of image. Any solution to solved this problem?

Example of code

$(document).on("click", "#save", function() {
  html2canvas(
    $("body"), {
      onrendered: function(canvas) {
        $("#result_here").append(canvas);
        var data = new FormData();
        data.append("data", "the_text_you_want_to_save");

        var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
        xhr.open('post', 'save_file.php', true);
        xhr.send(data);
      }
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="canvas" style="border:1px solid red; width: 300px; heght:300px; ">
  <p>hello
    <p>
      <p>สวัสดี</p>
</div>

<div id="result_here" stlye="border:1px solid blue;"></div>

<button id="save">SAVE</button>

this is my result

( first block is html and second block is result of image you will see a diffrence on )

Ladanum

### my js code ### $(document).on("click", "#save", function(){ html2canvas($("body"), { onrendered: function(canvas) { $("#result_here").append(canvas); var data = new FormData(); data.append("data" , "the_text_you_want_to_save"); var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP"); xhr.open( 'post', 'save_file.php', true ); xhr.send(data); } }); }); – Ladanum

so the Thai characters are being switched around? – Bunnie

Created a jsFiddle – Bunnie

OMG I tried many ways then i found this example jsfiddle.net/8ypxW/3 and I try to remove unnecessary code ... then... jsfiddle.net/8ypxW/1538 OMG It work!!! ... anyone can give some explanation for this??? – Ladanum

I don't know why it doesn't work then i remove CSS class out?? – Ladanum

The example you posted didn't work. You're simply copying your canvas objects, which is why they all look identical. You're not actually saving any images. – Adrenal

please try jsfiddle.net/8ypxW/1538 still working for me. – Ladanum

p{font-weight: bold} – Intricate

I suspect this effect is an issue of incomplete support of combining characters in html2canvas, possibly dependent on fonts and their variants. Note that the sequence of Unicode code points LATIN SMALL LETTER C (U+0063), COMBINING CEDILLA (U+0327) only renders as a c while it should produce a glyph similar to LATIN SMALL LETTER C WITH CEDILLA (U+00E7). Also note that the latter comes out properly (documented in this fiddle). – Blenny

Answer 1

For those having issues with html2canvas, I recommend switching to the modern-screenshot package. It's more lightweight and offers better output quality. Example in this case: https://jsfiddle.net/x1apujzd

$(document).on("click", "#save", function() {
  modernScreenshot.domToCanvas($("body")[0]).then(function(canvas) {
    $("#result_here").append(canvas);
  })
});

Draught

Answer 2

font-family: monospace;

<div id="canvas" style="border:1px solid red; width: 300px; heght:300px; font-family: monospace; ">

<p>hello
  <p>
    <p>สวัสดี</p>

example here - jsfiddle.net/chit33/xfj933m1/4

Ahead

Answer 3

My suggestion would be to double check your image, make sure its uploaded and labeled correctly and trying to full the file from a publicly accessed place.

Marketable

Answer 4

use https://html2canvas.hertzen.com is very helpful. use this lib instead origin canvas.toDataUrl()

Discus