运行这个代码,然后“保存”你会有差异的图像.解决这个问题的任何解决方案？
代码示例
$(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,第二块是图像的结果,你会看到一个差异)
解决方法
font-family：monospace;
<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
