Html5画布尺寸打印尺寸

时间:2017-09-12 08:06:51

标签: javascript canvas printing html5-canvas fabricjs


我有一个小问题,虽然我搜索了博客,文章和一些stackoverflow问题,但仍然有一个小混乱,所以我想提出一个问题。
我需要调整画布进行打印,我该怎么办?实际上,打印的最大限制是6.50英尺x 15.75英寸(英寸),尺寸可以在此范围内变化。如果我没有错,DPI与我们正在使用的屏幕(它们对打印设备更有用)无关,但它如何在画布上占据主导地位?例如

6.50 * 72 = 468像素 15.75 * 72 = 1134 px

或 6.50 * 96 = 624像素 15.75 * 96 = 1512 px

或 6.50 * 300 = 1950像素 15.75 * 300 = 4725 px

我的画布工作区域不能超过703px X 391px; 那么究竟我需要根据我的画布尺寸进行调整才能获得精确的打印效果?还是我错过了什么? 在受限区域中绘制然后以各种尺寸打印时要考虑的比例因子。 任何建议或链接都​​将不胜感激。

由于

PS:我在所有画布上都使用了fabricjs。

1 个答案:

答案 0 :(得分:0)

Fabric js可以帮助您提供缩放系数。

您可以根据需要定义画布,并限制打印尺寸的宽高比。

假设您要打印一张6 x 15英寸的纸张。

您将定义一个宽高比为6/15的画布,所以2/5。

700px x 280px符合此宽高比和画布大小限制。

您将正常使用画布,何时可以导出图形文件:

定义最终尺寸

6 x 15 inch at 300dpi = 1800 x 4500 pixels.

找出画布与最终画布之间的比例:

4500 / 700 = 6.428
然后你可以做

canvas.toDataUrl({ multiplier: 6.428 })您应该获得正确尺寸的文件。