22

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

enter image description here

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

Kaiido
  • 123,334
  • 13
  • 219
  • 285
lovepong
  • 625
  • 1
  • 9
  • 19
  • ### 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); } }); }); – lovepong Jul 23 '15 at 06:21
  • so the Thai characters are being switched around? – jasonscript Jul 23 '15 at 06:29
  • 1
    Created a [jsFiddle](http://jsfiddle.net/0cf7p5ao/1/) – jasonscript Jul 23 '15 at 06:45
  • 2
    OMG I tried many ways then i found this example https://jsfiddle.net/8ypxW/3/ and I try to remove unnecessary code ... then... http://jsfiddle.net/8ypxW/1538/ OMG It work!!! ... anyone can give some explanation for this??? – lovepong Jul 23 '15 at 10:57
  • I don't know why it doesn't work then i remove CSS class out?? – lovepong Jul 23 '15 at 11:02
  • [The example you posted](http://jsfiddle.net/8ypxW/1538/) didn't work. You're simply copying your canvas objects, which is why they all look identical. You're not actually saving any images. – approxiblue Sep 08 '15 at 03:04
  • please try http://jsfiddle.net/8ypxW/1538/ still working for me. – lovepong Sep 09 '15 at 10:09
  • p{font-weight: bold} – Pixelomo Nov 23 '15 at 11:16
  • 2
    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](http://jsfiddle.net/collapsar/kywxawjt/1/)). – collapsar Nov 25 '15 at 11:24

4 Answers4

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);
  })
});
khangnd
  • 323
  • 3
  • 11
0

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

Chit Anuchit
  • 131
  • 2
  • 5
0

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.

spencer
  • 1
-2

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

Khajornpong Vannapong
  • 1