fix(image): fix dataUri with type svg-base64 in browsers (#3144)

ST-DDT · web-flow · commit 78b2a3a8b856 · 2024-09-26T16:00:14.000Z
diff --git a/src/internal/base64.ts b/src/internal/base64.ts
@@ -0,0 +1,24 @@
+/**
+ * This works the same as `Buffer.from(input).toString('base64')`
+ * to work on both Node.js and browser environment.
+ *
+ * @internal
+ *
+ * @param input The string to encode to Base64.
+ *
+ * @returns Base64 encoded string.
+ *
+ * @see https://datatracker.ietf.org/doc/html/rfc4648
+ *
+ * @example const encodedHeader = toBase64(JSON.stringify(header));
+ */
+export const toBase64: (input: string) => string =
+  typeof Buffer === 'undefined'
+    ? (input) => {
+        const utf8Bytes = new TextEncoder().encode(input);
+        const binaryString = Array.from(utf8Bytes, (byte) =>
+          String.fromCodePoint(byte)
+        ).join('');
+        return btoa(binaryString);
+      }
+    : (input) => Buffer.from(input).toString('base64');
diff --git a/src/modules/image/index.ts b/src/modules/image/index.ts
@@ -1,3 +1,4 @@
+import { toBase64 } from '../../internal/base64';
 import { deprecated } from '../../internal/deprecated';
 import { ModuleBase } from '../../internal/module-base';
 
@@ -388,8 +389,6 @@ export class ImageModule extends ModuleBase {
 
     return type === 'svg-uri'
       ? `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`
-      : `data:image/svg+xml;base64,${Buffer.from(svgString).toString(
-          'base64'
-        )}`;
+      : `data:image/svg+xml;base64,${toBase64(svgString)}`;
   }
 }
diff --git a/test/internal/base64.spec.ts b/test/internal/base64.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { faker } from '../../src';
+import { toBase64 } from '../../src/internal/base64';
+
+// This test is kind of useless, because during testing the Buffer object is always available.
+describe('toBase64', () => {
+  it.each(
+    faker.helpers.multiple(
+      () => faker.string.alphanumeric({ length: { min: 0, max: 100 } }),
+      { count: 5 }
+    )
+  )(
+    "should behave the same as `Buffer.from(value).toString('base64')`",
+    (value) => {
+      expect(toBase64(value)).toBe(Buffer.from(value).toString('base64'));
+    }
+  );
+});

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { toBase64 } from '../../internal/base64';`
`1`	`2`	`import { deprecated } from '../../internal/deprecated';`
`2`	`3`	`import { ModuleBase } from '../../internal/module-base';`
`3`	`4`
`@@ -388,8 +389,6 @@ export class ImageModule extends ModuleBase {`
`388`	`389`
`389`	`390`	`return type === 'svg-uri'`
`390`	`391`	? `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`
`391`		- : `data:image/svg+xml;base64,${Buffer.from(svgString).toString(
`392`		`- 'base64'`
`393`		- )}`;
	`392`	+ : `data:image/svg+xml;base64,${toBase64(svgString)}`;
`394`	`393`	`}`
`395`	`394`	`}`