Same code executed on the server does not produce the same results as in the browser

オープン
  • 何か問題がありますか？
#1,490 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
38/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript
領域
backend, frontend

調査の方向性

PDFKit のブラウザデモと提供されたコードから始め、Node 18.12.0 のサーバー出力を添付されたブラウザ PDF およびサーバー PDF と比較し、translate とパスのレンダリングに焦点を当てます。同じコードで両方の環境における期待される変換と描画順序が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Bug Report

Description of the problem

I have created working example of drawing SVG path into pdf using PDFKit browser sandbox (https://pdfkit.org/demo/browser.html)
The problem is, while it's working perfectly here, the same code ported to server environment produces different results.
The exact issue is within translate function, which translates the SVG path way too much (mathematically incorrectly). I assume the units would be at fault?
Attaching expected result from browser sandbox and result produced by the same code on the server (the same code minus blobStream code of course) (set the one from the browser as blue color)
4282dfc2-f3f1-4399-9ec4-191e59185540.pdf
2SFtR3p2.pdf

EDIT:
Also just discovered, when drawing rect and then drawing the path, it works as expected in the browser, but on the server the drawn rect is drawn OVER the path, even though the order of drawing is preserved.
To test, place doc.save().rect(0, 0, totalSize, totalSize).fill('#00FF00').restore() just before path drawing
result when rendered on the server:
5Hl7kt4n.pdf
result from browser sandbox:
8b7edae8-0a0c-412d-8fa9-4412d5963b9d.pdf

Code sample

var paddingFactor = 3
var size = 500

var sizeFactor = 25
var additionalSpaceIfNoPadding = 1
var scale = size / sizeFactor
var padding = paddingFactor * scale
var hasNoPadding = padding === 0
var totalSize = size + (hasNoPadding ? additionalSpaceIfNoPadding * 2 : padding * 2)

var doc = new PDFDocument({size:[totalSize,totalSize]});
var stream = doc.pipe(blobStream());

const delta = hasNoPadding ? additionalSpaceIfNoPadding : padding

doc
  .save()
  .translate(delta, delta)
  .scale(scale)
  .strokeColor('#0000ff')
  .path('M0 0.5h7m1 0h1m1 0h5m3 0h7M0 1.5h1m5 0h1m2 0h2m1 0h1m1 0h2m2 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m3 0h1m1 0h2m1 0h2m1 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m6 0h2m1 0h1m1 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m3 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m3 0h1m2 0h4m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m1 0h1m1 0h1m3 0h1M0 8.5h2m1 0h2m1 0h1m2 0h2m1 0h3m1 0h1m1 0h1m5 0h1M0 9.5h1m1 0h1m1 0h1m2 0h3m2 0h2m2 0h8M0 10.5h4m1 0h3m2 0h1m2 0h1m1 0h2m4 0h1m2 0h1M0 11.5h1m1 0h3m4 0h2m1 0h1m3 0h1m2 0h1m1 0h4M1 12.5h2m1 0h3m2 0h1m3 0h1m3 0h1m1 0h2m3 0h1M0 13.5h3m4 0h2m3 0h3m1 0h2m1 0h2m2 0h1M0 14.5h5m1 0h1m4 0h1m2 0h1m3 0h7M0 15.5h1m1 0h1m2 0h1m1 0h3m2 0h1m1 0h2m1 0h2m1 0h1m1 0h1m1 0h1M0 16.5h1m1 0h1m1 0h3m4 0h1m1 0h1m1 0h9M8 17.5h7m1 0h1m3 0h1m1 0h2M0 18.5h7m5 0h2m1 0h2m1 0h1m1 0h3m1 0h1M0 19.5h1m5 0h1m2 0h4m2 0h2m3 0h3m1 0h1M0 20.5h1m1 0h3m1 0h1m1 0h1m3 0h1m3 0h9M0 21.5h1m1 0h3m1 0h1m1 0h5m1 0h1m4 0h1m1 0h2m1 0h1M0 22.5h1m1 0h3m1 0h1m2 0h2m3 0h1m1 0h1m1 0h2m2 0h3M0 23.5h1m5 0h1m1 0h1m3 0h1m4 0h5m1 0h2M0 24.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m2 0h1')
  .stroke()
  .restore()

// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function() {
  iframe.src = stream.toBlobURL('application/pdf');
});

Your environment

  • pdfkit version: 0.14.0
  • Node version: 18.12.0
  • Browser version (if applicable): Opera 106.0.4998.28
  • Operating System: Windows 10
主要言語
JavaScript
スター
10.7k
フォーク
1.2k
平均マージ
22時間 55分
マージ済み PR（30日）
25

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

foliojs/pdfkit のほかの issue

foliojs/pdfkit の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。