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

未关闭
  • 哪里不对？
#1,490 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
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
平均合并
21 小时 41 分钟
30 天内合并 PR
27

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

foliojs/pdfkit 的其他 Issue

查看 foliojs/pdfkit 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。