打印画布内容

var print = document.createElement('button'); 
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 

canvas.width = 300; 
canvas.height = 100; 

ctx.fillStyle = '#000'; 
ctx.font = '15px sans-serif'; 
ctx.fillText('Fill Text, 18px, sans-serif', 10, 20); 

print.innerHTML = 'Print'; 

document.body.appendChild(print); 
document.body.appendChild(canvas); 

print.addEventListener('click', function() { 
    window.print(); 
});

http://jsfiddle.net/vpetrychuk/LWup5/。打印画布内容

正如你所看到的画布中的文字显示ok，但点击“Print”按钮（并将页面保存为PDF）后，输出图像变得丑陋。

是否有机会打印画布内容而不模糊？

来源

2013-11-03 Vitalii Petrychuk

您需要将实际画布放在打印尺寸上，然后使用CSS规则在屏幕上进行缩放。

浏览器将始终首先使用内部位图大小并将其调整为打印或屏幕。如果位图的分辨率高，则在打印时会得到更好的结果。

但是，请注意，虽然在打印到画布上时需要缩放每个坐标和大小。您还需要优先考虑屏幕和打印，因为其中一个看起来会更糟糕（如果您优先考虑打印，屏幕和vica verse不会超级）。

这里是一个modified example of your canvas这是现在等效300 DPI的（相对于默认96 DPI）。你可以看到它在屏幕上看起来相同，但打印时会更清晰。

/// conversion factor for scale, we want 300 DPI in this example 
var dpiFactor = 300/96, 
    width = 400, 
    height = 100; 

/// set canvas size representing 300 DPI 
canvas.width = width * dpiFactor; 
canvas.height = height * dpiFactor; 

/// scale all content to fit the 96 DPI display (DPI doesn't really matter here) 
canvas.style.width = width + 'px'; 
canvas.style.height = height + 'px'; 

/// scale all sizes incl. font size 
ctx.font = (15 * dpiFactor).toFixed(0) + 'px sans-serif'; 

/// scale all positions 
ctx.fillText('Fill Text, 18px, sans-serif', 10 * dpiFactor, 20 * dpiFactor);

只需使用包装函数来完成所有的数学你：

function fillText(txt, x, y) { 
    ctx.fillText(txt, x * dpiFactor, y * dpiFactor); 
}

来源

2013-11-03 18:35:42 K3N

您可以尝试检测何时会发生打印（例如，使用Webkit window.matchMedia），但实际打印是使用不在您控制范围内的缩放来完成的，因此无法为清晰图形创建完美的1x1缩放画布。

当您检测到打印时，您可以用足够高分辨率的版本替换画布，但输出的确切实际尺寸未知。就好像用户具有放大的页面视图一样......即使画布被锐利地绘制，浏览器也可以放大它，使得结果模糊。

对于文本而言，最好的质量选项是使用普通文本div而不是使用fillText（当然，这对于所有用例都不适用）。

来源

2013-11-03 16:27:36 6502

我曾在CSS width: 100%帆布，造成错误的比例

固定由100%更改为210mm

来源

2016-01-14 11:32:02 Eugene

更好的解决方案是使用canvas.toDataURL（）方法，然后将结果字符串设置为img的src。当这样做时，通过Javascript生成画布并且不会将其附加到页面主体。

来源

2016-03-16 23:01:11 Daniel

打印画布内容

回答

相关问题