Html2Canvas与泰语的问题

Question

运行此代码然后"保存"您将获得图像差异.解决这个问题的任何解决方案？

代码示例

$(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>

这是我的结果

(第一个块是html,第二个块是图像的结果,你会看到差异)

Answer 1

字体系列：等宽字体；

\n\n

<div id="canvas" style="border:1px solid red; width: 300px; heght:300px; font-family: monospace; ">\n\n<p>hello\n  <p>\n    <p>\xe0\xb8\xaa\xe0\xb8\xa7\xe0\xb8\xb1\xe0\xb8\xaa\xe0\xb8\x94\xe0\xb8\xb5</p>\n

\n\n

此处示例 - jsfiddle.net/chit33/xfj933m1/4

\n