chore: remove svg-to-pdfkit to a native implementation

Author: Novout

packages/pdfeasy-vite-demo/src/main.ts

@@ -19,15 +19,17 @@ pdfeasy.new({
 })
 
 pdfeasy.add([
-  ...Utils.content(), // Utils for debug
   { raw: 'Hello PDFEasy!', text: { font: 'Roboto' }}, // custom font,
   { stack: [ // stack for paragraph's
     { raw: 'A ', text: {}},
     { raw: 'Simple', text: { bold: true, italic: true }},
     { raw: ' Stack!', text: {}},
   ]},
   // not recommended use this
-  { raw: 'Text without option!' },
+  { raw: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20"/></svg>', svg: {}},
+  //png
+  { raw: 'https://i.imgur.com/yvzMkqO.png', image: {} },
+  ...Utils.content(), // Utils for debug
 ])
 
 // or https://path/to/Roboto.ttf

packages/pdfeasy/package.json

@@ -45,8 +45,7 @@
     "file-saver": "2.0.5",
     "mitt": "3.0.0",
     "ohmyfetch": "0.4.15",
-    "pdfkit": "0.13.0",
-    "svg-to-pdfkit": "0.1.8"
+    "pdfkit": "0.13.0"
   },
   "devDependencies": {
     "@types/blob-stream": "0.1.30",

packages/pdfeasy/src/content/image.ts

@@ -6,6 +6,43 @@ export interface ImageRaw {
   type: 'base64' | 'http'
 }
 
+export const SvgToPNG = (raw: string): Promise<{ raw: string }> => {
+  return new Promise((res, rej) => {
+    const set = !raw.includes('<svg xmlns="http://www.w3.org/2000/svg"') ? raw.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg"') : raw
+    // convert svg to png
+    const blob = new Blob([set], {
+      type: 'image/svg+xml;charset=utf-8',
+    })
+
+    const URL = window.URL || window.webkitURL || window
+
+    const blobURL = URL.createObjectURL(blob)
+
+    const image = new Image()
+    image.setAttribute('crossOrigin', 'anonymous')
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+
+      canvas.width = 2000
+      canvas.height = 2000
+
+      const context = canvas.getContext('2d') as CanvasRenderingContext2D
+
+      context.drawImage(image, 0, 0, 2000, 2000)
+
+      const url = canvas.toDataURL('image/png')
+
+      res({ raw: url })
+    }
+    image.onerror = () => {
+      rej()
+    }
+
+    // TODO: other blob performatic method
+    image.src = blobURL
+  })
+}
+
 export const getImageRaw = (raw: string): Promise<ImageRaw> => {
   return new Promise(async (res, rej) => {
     if (regex().base64(raw)) {

packages/pdfeasy/src/pipe/factory.ts

@@ -1,9 +1,8 @@
-import { PDFEasyDefaults, regex } from '../utils/defines'
+import { PDFEasyDefaults } from '../utils/defines'
 import { getDataUri } from '../utils/request'
 import { Fonts, TextAlign } from '../utils/types'
-import SVGtoPDF from 'svg-to-pdfkit'
 import { getCorrectFontFamily } from './transform'
-import { getImageRaw } from '../content/image'
+import { getImageRaw, SvgToPNG } from '../content/image'
 
 export interface ContentText {
   fontSize?: number
@@ -136,11 +135,11 @@ export const resolveContent = async (
   }
 
   const addImage = async () => {
-    const style = content.image as ContentImage
+    const style = content.svg ? content.svg : content.image as ContentImage
 
     if (!content.raw) return
 
-    const { raw } = await getImageRaw(content.raw)
+    const { raw } = content.svg ? await SvgToPNG(content.raw) : await getImageRaw(content.raw)
 
     app.image(
       raw,
@@ -159,51 +158,12 @@ export const resolveContent = async (
     )
   }
 
-  const addSvg = async () => {
-    const style = content.svg as ContentSVG
-
-    if (!content.raw) return
-
-    const make = async (value: string) => {
-      await SVGtoPDF(
-        app,
-        value,
-        style.x || undefined,
-        style.y || undefined,
-        style.size
-          ? {
-              width: style.size?.width || undefined,
-              height: style.size?.height || undefined,
-            }
-          : {}
-      )
-    }
-
-    // svg recording
-    if (
-      content.raw.match(
-        /<svg\b[^>]*?(?:viewBox=\"(\b[^"]*)\")?>([\s\S]*?)<\/svg>/g
-      )
-    ) {
-      make(content.raw)
-
-      return
-    }
-
-    if (content.raw.match(/https?:\/\//g)) {
-      await getDataUri(content.raw).then((data: string) => {
-        make(data)
-      })
-    }
-  }
-
   if (!content.stack && !content.text && !content.image && !content.svg) {
     addSimpleText()
     return
   }
 
   if (content.stack) await addStack()
   if (content.text) await addText()
-  if (content.image) await addImage()
-  if (content.svg) await addSvg()
+  if (content.image || content.svg) await addImage()
 }

yarn.lock

@@ -5286,7 +5286,7 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-pdfkit@0.13.0, pdfkit@>=0.8.1:
+pdfkit@0.13.0:
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.13.0.tgz#da4c2becd63a129e3aae448fdaed4ee7be790f8f"
   integrity sha512-AW79eHU5eLd2vgRDS9z3bSoi0FA+gYm+100LLosrQQMLUzOBGVOhG7ABcMFpJu7Bpg+MT74XYHi4k9EuU/9EZw==
@@ -6168,13 +6168,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svg-to-pdfkit@0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/svg-to-pdfkit/-/svg-to-pdfkit-0.1.8.tgz#5921765922044843f0c1a5b25ec1ef8a4a33b8af"
-  integrity sha512-QItiGZBy5TstGy+q8mjQTMGRlDDOARXLxH+sgVm1n/LYeo0zFcQlcCh8m4zi8QxctrxB9Kue/lStc/RD5iLadQ==
-  dependencies:
-    pdfkit ">=0.8.1"
-
 tar-stream@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"