使用html2canvas將具有highcharts圖的html轉換為圖像
[英]convert html with highcharts graph to image using html2canvas
問題描述
我想將HTML頁面轉換為圖像，當我使用以下代碼時，得到的結果與我期望的不完全相同。
html2canvas($("#sharedOne"), {
onrendered: function (canvas) {
console.log("canvas",canvas)
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
}
});
這是HTML的屏幕截圖
這是運行上述代碼的結果的屏幕截圖。
當我使用下面的代碼時，我得到一個錯誤：
var canvas = document.getElementById('sharedOne');
console.log("CSSSS",canvas)
var t = canvas.toDataURL("image/png");
console.log("chart",t)
錯誤是：
錯誤canvas.toDataURL不是函數
我為此問題創建了示例，請檢查
https://jsfiddle.net/solanki/hku6r7g2/
注意： HTML頁面包含一個高圖圖表
3 個解決方案
解決方案1
0 2017-07-24 14:46:16
.toDataURL()只能在<canvas>元素上調用； 不能在任意HTML上使用。
console.log("Canvas:"); var theCanvas = document.getElementById('theCanvas'); var a = theCanvas.toDataURL("image/png"); console.log(a); // this will work console.log("Div:"); var theDiv = document.getElementById('theDiv'); // this will throw the "not a function" error: var b = theDiv.toDataURL("image/png");
<div id="theDiv"></div> <canvas id="theCanvas"></canvas>
您最初使用的html2canvas插件會基於原始HTML創建一個<canvas>元素，因此您可以在其上使用.toDataURL() ，但它不支持SVG，這就是為什么圖表在輸出中不可見的原因。
在這個（舊的，但乍看之下我看不到最新的東西）問題中可以找到將HTML轉換為圖像的其他技術：將HTML轉換為圖像
同時，要將SVG轉換為圖像，請參閱瀏覽器中的SVG轉換為圖像（JPEG，PNG等）。
您也許可以按順序鏈接這些技術：首先將SVG轉換為jpeg或png，然后將包含圖像的HTML轉換為<canvas> ，然后在該 .toDataURL上使用.toDataURL ...
解決方案2
0 2017-07-25 12:19:13
據我分析這個問題，我知道這涉及到SVG到PNG的轉換（SVG-> Canvas-> PNG）。 對於這種情況，html2canvas可能無法正常工作。
為什么html2canvas在這種情況下不適合：
由於Highcharts利用SVG繪制圖形和圖表，因此需要將svg轉換為畫布而不是HTML。 html2canvas是一個非常好的html到canvas轉換器，但是似乎它不是設計來轉換svg的，否則可能會導致錯誤 。
在搜索Google時，我遇到了一種名為Canvg的東西，我認為這可能會對您有所幫助。 所以我已經使用它進行編碼，並且可以解決。 下面附有代碼片段，您可以根據需要使用：
<html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.svg.js"></script>
-->
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<div id="sharedOne">
<div id="container"></div>
<button class="clickGrn">
GENERATE IMAGE
</button>
</div>
<div id="img">
<img id="newimg">
</div>
<script>
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
/*
YOU SHALL REPLACE THE FOLLOWING CODE WITH THE CODE PROVIDED BELOW
=================================================================
$("body").on("click", ".clickGrn", function () {
alert("Calll");
html2canvas($("#sharedOne"), {
allowTaint: true,
onrendered: function (canvas) {
canvg('canvas', canvas);
var imgsrc = canvas.toDataURL("image/jpg");
console.log(imgsrc);
$("#newimg").attr('src', imgsrc);
}
});
});
*/
$("body").on("click", ".clickGrn", function () {
var canvasSharedOne = document.createElement("canvas");
var HighChartsSVG=$('#container').find('svg')[0].outerHTML;
canvg(canvasSharedOne, HighChartsSVG);
var imgsrc = canvasSharedOne.toDataURL();
document.getElementById('newimg').src = imgsrc;
});
</script>
</body>
</html>
但是，是的，我仍然嘗試使用html2canvas的最新版本，其中包含一個附加的html2canvas.svg.js但由於創建者是從頭開始新編寫該庫的，因此無法弄清楚如何使用它。 他還指定添加了SVG渲染支持。 在閱讀代碼時，我認為他已使用FabricJS進行畫布支持。
由於它是新的，我們不能指望代碼示例，因為它仍處於開發階段。
解決方案3
0 已采納 2017-08-01 17:00:51
看起來它可以與html2canvas的beta版本（0.5.0-beta4）一起使用。
$('#convert').bind('click', function() {
html2canvas($("#main-container"), {
onrendered: function(canvas) {
var imgsrc = canvas.toDataURL("image/png");
$('<img src="' + imgsrc + '" />').appendTo('#main-container');
}
});
});
如何在不使用 html2canvas 的情況下將 div 轉換為圖像？
[英]How to convert a div into an image, without using html2canvas?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.