javascript - 打印画布内容

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）后，输出图像变得难看。

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

score 4 · Accepted Answer

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

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

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

这是一个修改后的画布示例，现在相当于 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);
}

score 1 · Accepted Answer

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

您可以在检测到打印时将画布替换为分辨率足够高的版本，但输出的确切实际尺寸未知。就像用户有一个缩放的页面视图......即使画布已经被清晰地绘制，浏览器也可以缩放它，从而使结果变得模糊。

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

score 0 · Accepted Answer

0

我有画布的 css width: 100%，导致缩放错误

100%通过从更改为修复210mm

于 2016-01-14T11:32:02.990 回答

score 0 · Accepted Answer

更好的解决方案是使用 canvas.toDataURL() 方法，然后将生成的字符串设置为 img 的 src。执行此操作时，请通过 Javascript 生成画布，并且永远不要将其实际附加到页面主体。

score 0 · Accepted Answer

丹尼尔的回答效果很好。打印图像而不是画布更好。你不需要编写任何 JS hack。

javascript - 打印画布内容

5 回答 5

Related

Reference