canvas.toDataURL返回空白圖像

Question

我想繪製一張表格到畫布上，然後將畫布保存爲圖像。 （需要創建PDF）

有趣的是，表格顯示在畫布上，但我無法用.toDataURL轉換它，它只是返回一個空白圖像。

控制檯中沒有警報。

function getImgDataTable(tableContainer) { 
    var tableArea = tableContainer.getElementsByTagName('table')[0].parentNode; 
    var doc = tableContainer.ownerDocument; 
    var canvas = doc.createElement('canvas'); 
    canvas.setAttribute('width', tableArea.offsetWidth); 
    canvas.setAttribute('height', tableArea.offsetHeight); 
    doc.body.appendChild(canvas); 
/* using rasterizeHTML.js */ 
    rasterizeHTML.drawHTML('<div style="font-size: 20px;">' + $("#data-table-chart-0").html()+ '</div>', canvas); 
    var imgDataTable = canvas.toDataURL(); 
    console.log(imgDataTable); 
    return imgDataTable; 
} 

我沒有想法，每一個見解都被讚賞。

Answer 1

試試這個http://jsfiddle.net/XtUFt/ HTML

<div id="c"></div> 
<div id="i"></div> 

JS

var canvas = document.createElement("canvas"); 
canvas.height = canvas.width = 200; 
$('#c').append(canvas); 

var ctx = canvas.getContext("2d"); 

//draw a circle 
ctx.beginPath(); 
ctx.arc(75, 75, 70, 0, Math.PI*2, true); 
ctx.closePath(); 
ctx.fill(); 

var dataURL = canvas.toDataURL("image/png"); 

$('#i').append($('<img/>', { src : dataURL }));