在台式机和移动设备上打印fabricjs画布？ [英] Printing fabricjs canvas on desktop and mobile devices?
本文介绍了在台式机和移动设备上打印fabricjs画布？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用以下设备在笔记本电脑上的画布上打印，效果很好（很赞user700284），但是当我尝试在平板电脑或移动设备上使用该功能时，它不起作用。当我单击按钮时，将打开并关闭新标签页（在移动设备/平板电脑上）。我该怎么做才能在所有介质上进行打印？
I'm using the following to print on my canvas from my laptop which works great (kudos user700284) but when I try to use the functionality on a tablet or mobile it doesn't work. When I click the button, a new tab opens and closes immediately (this is on mobile / tablet). What might I do to enable printing on all mediums?
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);
}
<button onclick="printCanvas()">Print</button>
推荐答案
您可以使用 html2canvas 和 jspdf 。
DEMO
var canvas = new fabric.Canvas('a',{backgroundColor :'powderblue'});
canvas.add(new fabric.Text('FabricJS is Awsome',{
left:50,
top:50
}));
function downloadCanvas(){
canvas.discardActiveObject();
canvas.renderAll();
html2canvas(document.getElementById('a'), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('test.pdf');
}
});
}
canvas {
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button onclick='downloadCanvas()'>Download</button>
<canvas id="a" width="500" height="250"></canvas>
这篇关于在台式机和移动设备上打印fabricjs画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
