HTML5畫布尺寸到打印尺寸

Question

盡管我搜索過博客，文章和一些stackoverflow問題，但我有一個小問題，但是仍然有一個小困惑，因此我想提出一個問題。
我需要調整畫布以進行打印，該怎么辦？ 實際上，最大打印限制為6.50'x 15.75'（英寸），尺寸可以在此范圍內變化。 如果我沒弄錯，DPI與我們正在使用的屏幕（在打印設備上更有用）無關，但是它如何在畫布上占主導地位？ 例如

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

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

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

我的畫布工作區不能超過703px X 391px； 那么我究竟需要為自己的畫布尺寸進行調整以獲取准確的所需打印內容呢？ 還是我錯過了什么？ 在狹窄區域繪制然后以各種尺寸打印時要考慮的比例因子。 任何建議或鏈接將不勝感激。

謝謝

PS：我在所有畫布上都使用fabricjs。

Answer 1

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 }) ，則應獲取正確大小的文件。