feat: add base64 image encoding

package.json

@@ -43,6 +43,7 @@
   },
   "homepage": "https://github.com/image-js/image-js#readme",
   "dependencies": {
+    "@jsonjoy.com/base64": "^1.1.2",
     "bresenham-zingl": "^0.2.0",
     "colord": "^2.9.3",
     "fast-bmp": "^2.0.1",

src/save/__tests__/__snapshots__/encodeBase64.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic image 2 (jpeg) 1`] = `"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2MBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//AABEIAAUABQMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AOu0zTbmyvL+efUZbpLmTfHE+cQDLHaMk+oHbpQB/9k="`;

src/save/__tests__/encodeBase64.test.ts

@@ -0,0 +1,85 @@
+import { createRgbaImage } from '../../../test/testUtils.js';
+import { encode } from '../encode.js';
+import { encodeBase64 } from '../encodeBase64.js';
+
+test('basic image (png)', () => {
+  const image = testUtils.createGreyImage([
+    [0, 0, 0, 0, 0],
+    [0, 255, 255, 255, 0],
+    [0, 255, 0, 255, 0],
+    [0, 255, 255, 255, 0],
+    [255, 0, 255, 0, 255],
+  ]);
+  const base64Url = encodeBase64(image, 'png');
+
+  expect(base64Url).toBe(
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAAAAACoBHk5AAAAFklEQVR4XmNggID///+DSCCEskHM/wCAnQr2TY5mOAAAAABJRU5ErkJggg==',
+  );
+});
+
+test('basic image 2 (jpeg)', () => {
+  const image = testUtils.createGreyImage([
+    [255, 255, 255, 255, 255],
+    [255, 0, 0, 0, 255],
+    [255, 0, 0, 0, 255],
+    [255, 0, 0, 0, 255],
+    [255, 255, 255, 255, 255],
+  ]);
+  const format = 'jpeg';
+  const base64 = encodeBase64(image, format);
+  const base64Data = Buffer.from(encode(image, { format })).toString('base64');
+  expect(typeof base64).toBe('string');
+  expect(base64Data).toMatchSnapshot();
+});
+
+test('legacy image-js test', () => {
+  const image = createRgbaImage([
+    [
+      255,
+      0,
+      0,
+      255, // red
+      0,
+      255,
+      0,
+      255, // green
+      0,
+      0,
+      255,
+      255, // blue
+    ],
+    [
+      255,
+      255,
+      0,
+      255, // yellow
+      255,
+      0,
+      255,
+      255, // magenta
+      0,
+      255,
+      255,
+      255, // cyan
+    ],
+    [
+      0,
+      0,
+      0,
+      255, // black
+      255,
+      255,
+      255,
+      255, // white
+      127,
+      127,
+      127,
+      255, //grey
+    ],
+  ]);
+  const format = 'jpeg';
+  const url = encodeBase64(image, format);
+  const base64Data = Buffer.from(encode(image, { format })).toString('base64');
+  expect(typeof url).toBe('string');
+  expect(base64Data).toBe(url.slice(url.indexOf(',') + 1));
+});

src/save/encodeBase64.ts

@@ -0,0 +1,18 @@
+import { toBase64 } from '@jsonjoy.com/base64';
+
+import type { Image } from '../Image.js';
+
+import { encode } from './encode.js';
+import type { ImageFormat } from './encode.js';
+/**
+ * Converts image into a base64 URL string.
+ * @param image - Image to get base64 encoding from.
+ * @param format - Image format.
+ * @returns base64 string.
+ */
+export function encodeBase64(image: Image, format: ImageFormat) {
+  const buffer = encode(image, { format });
+  const base64String = toBase64(buffer);
+  const dataURL = `data:image/${format};base64,${base64String}`;
+  return dataURL;
+}

src/save/index.ts

@@ -3,3 +3,4 @@ export * from './encodePng.js';
 export * from './encodeJpeg.js';
 export * from './write.js';
 export * from './writeCanvas.js';
+export * from './encodeBase64.js';