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 }));

Answer 2

它可能會返回空白，因為您正在嘗試獲取toDataURL，而無需等待瀏覽器將圖像加載到畫布元素中。 所以用setTimeOut包裝它。

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();

setTimeout(function(){
    var dataURL = canvas.toDataURL("image/png");
}, 5000);

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