4

I need to use html2canvas to convert HTML to image. The problem is that it can't show the Persian(Farsi) text correctly. I wonder if someone can help me to solve it !

#target {
  width: 160px;
  height: 50px;
  background: blue;
  color: #fff;
  padding: 10px;
}

button {
  display: block;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
  window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
      width: 320,
      height: 220
    });
  }
</script>

<div id="target">
   این یک متن فارسی است.
</div>
<button onclick="takeScreenShot()">to image</button>
Pedram
  • 15,766
  • 10
  • 44
  • 73
S. Ensiye Kiyamousavi
  • 153
  • 8

1 Answers1

3

Use text-align: left on #target

#target {
  width: 160px;
  height: 50px;
  background: blue;
  color: #fff;
  padding: 10px;
  text-align: left
}

button {
  display: block;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
  window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
      width: 320,
      height: 220
    });
  }
</script>

<div id="target">
   این یک متن فارسی است.
</div>
<button onclick="takeScreenShot()">to image</button>

Edit: found related topics:

Html2canvas image capturing issue with UTF-8 characters

Arabic Encoding with html2canvas

Pedram
  • 15,766
  • 10
  • 44
  • 73
  • I tried text-align but It dose not change in my project !! I use 1.0.0-alpha.5 – S. Ensiye Kiyamousavi Dec 23 '17 at 11:07
  • remove `text-align` and try this `letterRendering:true` if it not working, i suggest you to don't use `alpha` version, try `0.4.1` @S.EnsiyeKiyamousavi – Pedram Dec 23 '17 at 11:14
  • It says there isn't such version ! how update it to 0.4.1 – S. Ensiye Kiyamousavi Dec 23 '17 at 11:20
  • Get it [Here](https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js) @S.EnsiyeKiyamousavi – Pedram Dec 23 '17 at 11:20
  • @S.EnsiyeKiyamousavi `text-align: left:` is the only solution, on non alpha version. I don't know what should you do while using web pack. But take a look at official github, there are more similar topics [Githup](https://github.com/niklasvh/html2canvas/issues) – Pedram Dec 23 '17 at 11:28