當我使用下面的代碼時，我想將HTML頁面轉換爲圖像，我得到的結果與我期望的不完全匹配。將html與highcharts圖轉換爲使用html2canvas的圖像

html2canvas($("#sharedOne"), {       
onrendered: function (canvas) {     
console.log("canvas",canvas) 
    var imgsrc = canvas.toDataURL("image/png"); 
    console.log(imgsrc); 
    } 
});

這是HTML

This is a screenshot

的屏幕截圖，這是運行上面的代碼的結果的屏幕截圖。

this is a screenshot 當我使用下面的代碼，我得到一個錯誤：

var canvas = document.getElementById('sharedOne'); 
console.log("CSSSS",canvas) 
var t = canvas.toDataURL("image/png"); 
console.log("chart",t)

的錯誤是：

error canvas.toDataURL is not a function

對於此問題，創建例如請

https://jsfiddle.net/solanki/hku6r7g2/

注意： HTML頁面包含一個加大圖表

來源

2017-07-24 Solanki ram

你檢查什麼的'VAR帆布=的document.getElementById（ 'sharedOne'）後'canvas'值;'？ –

您的#sharedOne div不存在或不是HTML canvas元素。 –

@henriqueromao是的，我檢查畫布價值。它僅返回html –

它看起來像它與html2canvas的測試版（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'); 
    } 
    }); 
});

例子：
http://jsfiddle.net/g1c8Lyfn/

來源

2017-08-01 17:00:51

謝謝你。它工作正常，但圖像已被拉伸。 –

它的工作鉻，但不工作在Firefox。 –

.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，所以你可以使用它.toDataURL()一個<canvas>元素 - ，但它不支持SVG，這就是爲什麼圖表在輸出中不可見。

其他一些技術轉換到HTML的圖像都可以在此找到（老了，但我沒有看到任何最近在第一次看）問題：Render HTML to an image

同時，SVG轉換爲圖像，看到Convert SVG to image (JPEG, PNG, etc.) in the browser

您可以來鏈接這些技術順序：首先你的SVG轉換成JPEG或PNG，然後將其轉換包含圖像的HTML成<canvas>，然後使用.toDataURL上是 ...

來源

2017-07-24 14:46:16

我覺得這是工作沒有畫布，請檢查此鏈接 https://jsfiddle.net/solanki/hku6r7g2/ 我有同樣的問題 –

@Solankiram在小提琴的代碼使用html2canvas到HTML轉換爲'在調用'.toDataURL（）'之前調用''元素。（請注意'console.log（「canvas」，canvas）'行的輸出。）這與我鏈接的舊問題中接受的答案中使用的技術相同。 –

@Solankiram對不起，我一開始並沒有意識到這裏有兩個不同的問題，我只回答其中的一個。我已經更新了答案 –

據我分析這個問題，我才知道這涉及到SVG到PNG的轉換（SVG - > Canvas - > PNG）。對於這種情況，html2canvas可能無法正常工作。

爲什麼不html2canvas適合在這種情況下：

由於Highcharts利用SVG的渲染圖形和圖表，它需要SVG轉換爲畫布，而不是HTML。 html2canvas是一個非常好的HTML到canvas轉換器，但它似乎是not designed to convert svg's或may render faulty。

在搜索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.svg.js html2canvas，但無法弄清楚如何使用它作爲創建者從頭開始新編寫了該庫。他還指定添加SVG渲染支持。在閱讀代碼時，我認爲他已經使用FabricJS進行畫布支持。

由於它是新的，我們不能期望代碼示例，因爲它仍處於開發階段。

來源

2017-07-25 12:19:13 thecodingpanda

它正在工作，但這個只生成SVG圖像，而不是HTML。我需要（HTML和圖形）。 –

將html與highcharts圖轉換爲使用html2canvas的圖像

回答

爲什麼不html2canvas適合在這種情況下：

相關問題