印花fabricjs帆布?

时间:2017-11-13 19:50:59

标签: javascript html5 canvas fabricjs

我一直在努力创建功能,让我可以打印我的fabricjs画布。我没有运气就试过mentioned here方法。我能够进入打印对话框,但是除了标题和页面信息之外它是空白的。有人能指出我正确的方向吗?

我目前正在使用:

// Trying to print
function printCanvas()  
{  
    var dataUrl = document.getElementById('c').toDataURL(); //attempt to save base64 string to server using this var  
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += '<head><title>Print canvas</title></head>';
    windowContent += '<body>'
    windowContent += '<img src="' + dataUrl + '">';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('','','width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}
<button onclick="printCanvas()">Print</button>

enter image description here

1 个答案:

答案 0 :(得分:2)

加载内容后,您需要执行打印操作。以下代码应该可以使用

function printCanvas() {
    var dataUrl = document.getElementById('c').toDataURL(); //attempt to save base64 string to server using this var  
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += '<head><title>Print canvas</title></head>';
    windowContent += '<body>'
    windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('', '', 'width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
}