泰语的Html2Canvas问题答案

【问题标题】：Html2Canvas problems with thai language泰语的Html2Canvas问题
【发布时间】：2015-10-13 07:09:49
【问题描述】：

运行此代码，然后“保存”您将看到不同的图像。有什么办法可以解决这个问题吗？

代码示例

$(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，第二个块是图像的结果，您会看到差异）

【问题讨论】：

### 我的 js 代码 ### $(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); } }); });
所以泰语字符被转换了？
创建了jsFiddle
天啊，我尝试了很多方法，然后我找到了这个例子jsfiddle.net/8ypxW/3，然后我尝试删除不必要的代码......然后......jsfiddle.net/8ypxW/1538 OMG 它工作！ ...任何人都可以对此给出一些解释？？？
我怀疑这种效果是不完全支持在 html2canvas 中组合字符的问题，可能取决于字体及其变体。请注意，Unicode 代码点序列LATIN SMALL LETTER C (U+0063), COMBINING CEDILLA (U+0327) 仅呈现为c，而它应该产生类似于LATIN SMALL LETTER C WITH CEDILLA (U+00E7) 的字形。另请注意，后者正确显示（记录在in this fiddle）。

标签： javascript jquery screenshot html2canvas

【解决方案1】：

字体系列：等宽；

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

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

这里的例子 - jsfiddle.net/chit33/xfj933m1/4

【讨论】：

【解决方案2】：

使用https://html2canvas.hertzen.com 非常有帮助。使用这个库代替原始 canvas.toDataUrl()

【讨论】：