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

Abierto
  • ¿Algo no está bien?
#1,490 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
backend, frontend

Línea de trabajo

Empieza por la demo de navegador de PDFKit y el código proporcionado; después compara la salida del servidor de Node 18.12.0 con los PDF de navegador y de servidor adjuntos, centrándote en translate y en el renderizado de rutas. Se considera terminado cuando el mismo código conserva la transformación y el orden de dibujo esperados en ambos entornos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
10.7k
Forks
1.2k
Merge medio
22 h 55 min
PR fusionados (30 d)
25

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de foliojs/pdfkit

Todos los issues de foliojs/pdfkit

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.