Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
laszlo1337 opened this issue Jan 15, 2024 · 1 comment

Comments

@laszlo1337
Copy link

laszlo1337 commented Jan 15, 2024

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
@blikblum
Copy link
Member

Can you test with v0.15 and a browser app using webpack (https://github.com/foliojs/pdfkit/tree/master/examples/webpack)?

Currently the docs build system is broken, so (https://pdfkit.org/demo/browser.html) is outdated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants