Html2canvas用空格和sankey图表拼写Google [英] Html2canvas letterrendering with space and sankey chart Google
本文介绍了Html2canvas用空格和sankey图表拼写Google的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，
我用sankey图创建了这个html文件和两个按钮png保存图像和jpg，这两个按钮转换div html-content-holde使用html2canvas进入画布和图像，它的工作原理。但我有'A b'到sankey行之间的空间问题，（我在html2canvas中设置选项letterRendering：true），如果我在图像中的两个字母之间留出空格我重复了两次'A b'，如果我写的话'A_b'一切正常。你有什么建议吗？
Hello,
I have created this html file with sankey graph and two button png save image and jpg, these two buttons convert the div html-content-holde into a canvas and image with html2canvas, and it work. But i have a problem with space between 'A b' into sankey rows,( i set option letterRendering: true in html2canvas) , if I leave the space between two letters in the image I have repeated twice 'A b', if i write 'A_b' everything works. do you have some proposals?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A b', 'X', 5 ],
[ 'A b', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
var colors = ['#4682B4', '#FFD700' , '#00FF00' , '#4682B4' , '#4682B4' , '#4682B4' , '#4682B4' , '#4682B4' ];
var options = { height: 300, width: 1200, sankey: { iterations: 50,
link: { color: {fill: '#D3D3D3', fillOpacity:0.7, stroke: '#696969', strokeWidth: 0.3 }, colorMode: 'none'},
node: { label: {fontName: 'Calibri ', fontSize: 18, color: '#000000', bold: false, italic: false}, interactivity: true, labelPadding: 20, nodePadding: 25, width: 10, colors: colors}}};
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options); }
$("#btnPrint").live("click", function () { var divContents = $("#sankey_multiple").html(); var printWindow = window.open('', '', 'height=700,width=1000'); printWindow.document.write('<html><head><title>sser</title>'); printWindow.document.write('</head><body >'); printWindow.document.write(divContents); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); });
$(function() {
$("#salvapng").click(function() {
var element = $("#html-content-holder");
html2canvas(element, {
letterRendering: true,
}).then(function(canvas){
var imgageData = canvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("<a>", {href:newData, download:"Proof1.png",on:{click:function(){$(this).remove()}}})
.appendTo("body")[0].click()
})
});
});
$(function() {
$("#salvajpg").click(function() {
var element = $("#html-content-holder");
html2canvas(element, {
letterRendering: true,
}).then(function(canvas){
var imgageData = canvas.toDataURL("image/jpg");
var newData = imgageData.replace(/^data:image\/jpg/, "data:application/octet-stream");
$("</a><a>", {href:newData, download:"Proof1.jpg",on:{click:function(){$(this).remove()}}})
.appendTo("body")[0].click()
})
});
});
</script>
</head>
<body>
<div id="html-content-holder" style="width: 1200px; height: 400px; padding-left: 30px; padding-top: 20px">
<div style="font-family: Arial; font-size: 40px; color: black">This is some text</div>
<div id="sankey_multiple" style="width: 1200px; height: 300px">
<div>
<div style="width: 1200px; height: 300px"></div>
</div>
</div> </div>
<input type="button" id="salvapng" value="Save as PNG image"/> <input type="button" id="salvajpg" value="Save as JPG image"/> <input type="button" value="Print image" id="btnPrint" /> <br> </body> </html>
</body>
</html> </a>
我尝试过：
i set letterRendering：true，但看起来完全一样，如果我写'A_b'一切正常
推荐答案
（ #btnPrint）。live（click，function（）{var divContents =
("#btnPrint").live("click", function () { var divContents =
（＃sankey_multiple）。html（）; var printWindow = window.open（'' ，''，'height = 700，width = 1000'）; printWindow.document.write（'< html>< head>< title> sser< / title>'）; printWindow.document.write（'< ; / head>< body>'）; printWindow.document.write（divContents）; printWindow.document.write（'< / body>< / html>'）; printWindow.document.close（）; printWindow .print（）;}）;
("#sankey_multiple").html(); var printWindow = window.open('', '', 'height=700,width=1000'); printWindow.document.write('<html><head><title>sser</title>'); printWindow.document.write('</head><body >'); printWindow.document.write(divContents); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); });
（function（）{
(function() {
这篇关于Html2canvas用空格和sankey图表拼写Google的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
