Question

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/

正如您可以看到画布中的文字显示正常，但点击“打印”按钮（并将页面保存为PDF）后输出图像变得难看。

是否有机会在不模糊的情况下打印画布内容？

Answer 1

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

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

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

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

Answer 2

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

当您检测到打印时，可以使用足够高的分辨率版本替换画布，但输出的确切实际大小未知。就好像用户有一个页面的缩放视图......即使画布已经被大幅绘制，浏览器也可以缩放它，使结果模糊不清。

可能对于文本而言，最佳质量选项是使用在画布上过度使用的常规文本div而不是使用fillText（当然这不适用于所有用例）。

Answer 3

我在css width: 100%中使用了canvas，导致了错误的缩放

通过从100%更改为210mm

来解决问题

Answer 4

更好的解决方案是使用canvas.toDataURL（）方法，然后将结果字符串设置为img的src。执行此操作时，通过Javascript生成画布，并且实际上不会将其附加到页面正文。

Answer 5

丹尼尔的回答非常有效。打印图像而不是画布更好。您无需编写任何 JS 技巧。

打印画布内容

5 个答案: