Pdf.js: SVG ๊ฒฝ๋กœ๊ฐ€ 2๊ฐœ์˜ ๋…ธ๋“œ๋กœ ์ž˜๋ชป ๋ถ„ํ• ๋จ

์— ๋งŒ๋“  2019๋…„ 02์›” 06์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mozilla/pdf.js

์—ฌ๊ธฐ์— PDF ํŒŒ์ผ์„ ์ฒจ๋ถ€(๊ถŒ์žฅ)ํ•˜๊ฑฐ๋‚˜ ๋งํฌ:
ํ…Œ์ŠคํŠธ4.pdf

๊ตฌ์„ฑ:

  • ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐ ํ•ด๋‹น ๋ฒ„์ „: Chrome 56.0.2924.76
  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „: Linux Mint 18.3
  • PDF.js ๋ฒ„์ „: c0d6e46e392b327996eb0964b7932cb5bdde1727 ์ปค๋ฐ‹
  • ๋ธŒ๋ผ์šฐ์ € ํ™•์žฅ์ž: ์•„๋‹ˆ์š”

๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ๋‹จ๊ณ„:

  1. "๋…ธ๋“œ pdf2svg.js test4.pdf" ์‹คํ–‰
  2. ์ถœ๋ ฅ test4.1.svg๋ฅผ Chrome์— ๋กœ๋“œ
  3. ์ฝ˜์†” ์˜ค๋ฅ˜ ๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. ๋‹น์‹ ์€ ์ด๊ฒƒ์„ ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค:
    chrome_console_error

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? (์Šคํฌ๋ฆฐ์ƒท ์ถ”๊ฐ€)
์˜ค๋ฅ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๋ฌด์—‡์ด ์ž˜๋ชป๋˜์—ˆ๋‚˜์š”? (์Šคํฌ๋ฆฐ์ƒท ์ถ”๊ฐ€)
์ถœ๋ ฅ์˜ ํ•œ ๊ฒฝ๋กœ๊ฐ€ ๋‘ ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.
์ดˆ๊ธฐ "M"์€ ํ•œ ๋…ธ๋“œ์— ์žˆ๊ณ  ๋‹ค์Œ "L"์€ ๋‹ค์Œ ๋…ธ๋“œ์— ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋“ค์€ ๋™์ผํ•œ ๋…ธ๋“œ์— ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
bad_svg_node

๋ทฐ์–ด์— ๋Œ€ํ•œ ๋งํฌ(mozilla.github.io/pdf.js๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ ๋˜๋Š” Firefox/Chrome ํ™•์žฅ์œผ๋กœ ํ˜ธ์ŠคํŒ…๋˜๋Š” ๊ฒฝ์šฐ):

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

OperatorList ์˜ ์ž‘๋™ ๋ฐฉ์‹์— ์ต์ˆ™ํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฐ์‚ฐ์ž ๋ชฉ๋ก์ด ์•ฝ 1000๊ฐœ์˜ ์—ฐ์‚ฐ์ž ๋ฉ์–ด๋ฆฌ๋กœ ๋ถ„ํ• ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

์˜ณ์€; ์ด๋Š” ์ „์ฒด OperatorList (์ฆ‰, ํŽ˜์ด์ง€)๊ฐ€ ๊ตฌ๋ฌธ ๋ถ„์„๋˜๊ธฐ ์ „์— ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์—ฌ ํŽ˜์ด์ง€ ๋กœ๋“œ์—์„œ ์™„์ „ํžˆ ๋ Œ๋”๋ง๋˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ „์ฒด ์‹œ๊ฐ„์„ ์ค„์ด๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿด๋“ฏํ•˜๊ฒŒ ๋“ค๋ฆฌ๋‚˜์š”?

์˜ˆ, ํ™•์ธํ•˜๊ธฐ ์‰ฌ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค(๊ฐ’ ์„ ๋งŽ์ด ๋Š˜๋ฆฌ๋ฉด ์ด ์ฒญํฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Œ).

OperatorList ๋ฐ ์ƒ์ˆ˜ CHUNK_SIZE ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๋Œ€์‹  svg.js๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์ˆ˜๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์€ ํ™•์‹คํžˆ ํ—ˆ์šฉ ๊ฐ€๋Šฅํ•œ ์†”๋ฃจ์…˜์ด ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ์„ , ์˜ค๋ฅ˜๋ฅผ ๋‹ค๋ฅธ ๊ณณ์œผ๋กœ ์˜ฎ๊ธฐ๋Š” ๊ฒƒ ์™ธ์—๋Š” ์•„๋ฌด ๊ฒƒ๋„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ๋กœ, ํ›จ์”ฌ ๋” ์ค‘์š”ํ•œ ๊ฒƒ์€ ์ด๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ์บ”๋ฒ„์Šค ๋ฐฑ์—”๋“œ์˜ ์ผ๋ฐ˜์ ์ธ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ๊ด‘๋ฒ”์œ„ํ•œ ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•„๋งˆ๋„ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ค‘๊ฐ„ ๊ฒฝ๋กœ ํŽ˜์ธํŒ… ์—ฐ์‚ฐ์ž๊ฐ€ ์—†์œผ๋ฉด ์—ฐ์† OPS.constructPath ์—ฐ์‚ฐ์ž๋ฅผ ํ•˜๋‚˜์˜ <svg:path> ๋…ธ๋“œ๋กœ ๊ฒฐํ•ฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...

๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๊ทธ๊ฒƒ์€ ์™„์ „ํžˆ ํ•ฉ๋ฆฌ์ ์œผ๋กœ ๋“ค๋ฆฝ๋‹ˆ๋‹ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

์ด๊ฒƒ์€ ๋ฒ„๊ทธ #9167๊ณผ ๊ด€๋ จ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฒ”์ธ์ด ์—ฌ๊ธฐ์— ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
https://github.com/mozilla/pdf.js/blob/a045a00af34b764edda5991d2bcd18541ed60536/src/core/operator_list.js#L533 -L534
OperatorList ์˜ ์ž‘๋™ ๋ฐฉ์‹์— ์ต์ˆ™ํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฐ์‚ฐ์ž ๋ชฉ๋ก์ด ์•ฝ 1000๊ฐœ์˜ ์—ฐ์‚ฐ์ž ๋ฉ์–ด๋ฆฌ๋กœ ๋ถ„ํ• ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ๋•Œ๋•Œ๋กœ ์ฒญํฌ ๊ฒฝ๊ณ„๊ฐ€ PDF ๊ฒฝ๋กœ ์ •์˜์˜ ์ค‘๊ฐ„์— ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‘ ๊ฐœ์˜ OPS.constructPath ์—ฐ์‚ฐ์ž๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ›„์ž๋Š” moveTo ์‹œ์ž‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿด๋“ฏํ•˜๊ฒŒ ๋“ค๋ฆฌ๋‚˜์š”?

OperatorList ๋ฐ ์ƒ์ˆ˜ CHUNK_SIZE ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๋Œ€์‹  svg.js๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ค‘๊ฐ„ ๊ฒฝ๋กœ ํŽ˜์ธํŒ… ์—ฐ์‚ฐ์ž๊ฐ€ ์—†์œผ๋ฉด ์—ฐ์† OPS.constructPath ์—ฐ์‚ฐ์ž๋ฅผ ํ•˜๋‚˜์˜ <svg:path> ๋…ธ๋“œ๋กœ ๊ฒฐํ•ฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...

OperatorList ์˜ ์ž‘๋™ ๋ฐฉ์‹์— ์ต์ˆ™ํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฐ์‚ฐ์ž ๋ชฉ๋ก์ด ์•ฝ 1000๊ฐœ์˜ ์—ฐ์‚ฐ์ž ๋ฉ์–ด๋ฆฌ๋กœ ๋ถ„ํ• ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

์˜ณ์€; ์ด๋Š” ์ „์ฒด OperatorList (์ฆ‰, ํŽ˜์ด์ง€)๊ฐ€ ๊ตฌ๋ฌธ ๋ถ„์„๋˜๊ธฐ ์ „์— ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์—ฌ ํŽ˜์ด์ง€ ๋กœ๋“œ์—์„œ ์™„์ „ํžˆ ๋ Œ๋”๋ง๋˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ „์ฒด ์‹œ๊ฐ„์„ ์ค„์ด๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿด๋“ฏํ•˜๊ฒŒ ๋“ค๋ฆฌ๋‚˜์š”?

์˜ˆ, ํ™•์ธํ•˜๊ธฐ ์‰ฌ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค(๊ฐ’ ์„ ๋งŽ์ด ๋Š˜๋ฆฌ๋ฉด ์ด ์ฒญํฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Œ).

OperatorList ๋ฐ ์ƒ์ˆ˜ CHUNK_SIZE ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๋Œ€์‹  svg.js๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์ˆ˜๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์€ ํ™•์‹คํžˆ ํ—ˆ์šฉ ๊ฐ€๋Šฅํ•œ ์†”๋ฃจ์…˜์ด ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ์„ , ์˜ค๋ฅ˜๋ฅผ ๋‹ค๋ฅธ ๊ณณ์œผ๋กœ ์˜ฎ๊ธฐ๋Š” ๊ฒƒ ์™ธ์—๋Š” ์•„๋ฌด ๊ฒƒ๋„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ๋กœ, ํ›จ์”ฌ ๋” ์ค‘์š”ํ•œ ๊ฒƒ์€ ์ด๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ์บ”๋ฒ„์Šค ๋ฐฑ์—”๋“œ์˜ ์ผ๋ฐ˜์ ์ธ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ๊ด‘๋ฒ”์œ„ํ•œ ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•„๋งˆ๋„ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ค‘๊ฐ„ ๊ฒฝ๋กœ ํŽ˜์ธํŒ… ์—ฐ์‚ฐ์ž๊ฐ€ ์—†์œผ๋ฉด ์—ฐ์† OPS.constructPath ์—ฐ์‚ฐ์ž๋ฅผ ํ•˜๋‚˜์˜ <svg:path> ๋…ธ๋“œ๋กœ ๊ฒฐํ•ฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...

๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๊ทธ๊ฒƒ์€ ์™„์ „ํžˆ ํ•ฉ๋ฆฌ์ ์œผ๋กœ ๋“ค๋ฆฝ๋‹ˆ๋‹ค.

CHUNK_SIZE๋ฅผ 10000000์œผ๋กœ ๋Š˜๋ฆฌ๋ฉด ๋ฌธ์ œ๊ฐ€ ์‚ฌ๋ผ์ง์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
(๊ทธ๋ฆฌ๊ณ  ๋‚˜๋Š” ์ด๊ฒƒ์ด ์ ์ ˆํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์•„๋‹ˆ๋ผ๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค)
๋‹น์‹ ์˜ ๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰