feat: add convertDataUrlToBlob util

Author: simonhaenisch

jest-setup-file.cjs

@@ -1,3 +1,7 @@
+const fetch = require('node-fetch');
+
+global.fetch = fetch;
+
 /**
  * This file is referenced as a testing setup file for Jest. It runs once per test file immediately before executing the test.
  *

package.json

@@ -33,10 +33,12 @@
     "@ionic/core": "5.1.1",
     "@types/jest": "25.2.3",
     "@types/node": "14.0.6",
+    "@types/node-fetch": "2.5.7",
     "@types/nprogress": "0.2.0",
     "jest": "26.0.1",
     "moment": "2.26.0",
     "moment-timezone": "0.5.31",
+    "node-fetch": "3.0.0-beta.7",
     "nprogress": "0.2.0",
     "prettier": "2.0.5",
     "prettier-plugin-organize-imports": "1.0.4",

readme.md

@@ -119,6 +119,7 @@ The class implements `toValue`, `toJSON` and `toString` for easier serialization
 * `stopPropagation(event)`: Handler to stop event propagation.
 * `readFile(file)`: Read a file using a `FileReader` and return its data as a base64 encoded string.
 * `uuid()`: Generate a v4 compliant uuid.
+* `convertDataUrlToBlob(data)`: Convert the given data url into a blob.
 
 ## Publishing
 

src/utils/index.ts

@@ -246,3 +246,8 @@ export const uuid = () =>
 		const v = c === 'x' ? r : (r & 0x3) | 0x8;
 		return v.toString(16);
 	});
+
+/**
+ * Convert a data url to a blob.
+ */
+export const convertDataUrlToBlob = async (dataUrl: string) => fetch(dataUrl).then((res) => res.blob());

src/utils/utils.spec.ts

@@ -1,4 +1,4 @@
-import { base64ImageToDataUrl, clone, getByPath, getRandomInt } from '.';
+import { base64ImageToDataUrl, clone, convertDataUrlToBlob, getByPath, getRandomInt } from '.';
 
 describe('Utils', () => {
 	describe('getRandomInt(min, max)', () => {
@@ -88,4 +88,24 @@ describe('Utils', () => {
 			expect((copy as any).doesNotExist).toBe((object as any).doesNotExist);
 		});
 	});
+
+	describe('convertDataUrlToBlob', () => {
+		it('should convert a data url to a blob', async () => {
+			const jpg = `data:image/jpeg;base64,
+			/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
+			r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
+			////////////////////////////////////////////////////////////wAARCAAYAEADAREA
+			AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
+			AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
+			AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
+			MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
+			X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
+			JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=`;
+
+			const jpgBlob = await convertDataUrlToBlob(jpg);
+
+			expect(jpgBlob.size).toBe(512);
+			expect(jpgBlob.type).toBe('image/jpeg');
+		});
+	});
 });