diff --git a/packages/util/__tests__/lib/loader.test.ts b/packages/util/__tests__/lib/loader.test.ts new file mode 100644 index 0000000..4999571 --- /dev/null +++ b/packages/util/__tests__/lib/loader.test.ts @@ -0,0 +1,77 @@ +import './../../../../__tests__/polyfill/image' +import { + loadHTML, loadImage, loadSVG +} from '../../src/lib/loader'; +import { parseHTMLToDataURL, parseSVGToDataURL } from './../../src/lib/parser'; + +describe('@idraw/util: lib/loader', () => { + + test('loadHTML', async () => { + const html = ` + +
+
+ +
+ +
+ +
+
+ `; + const opts = { + width: 120, + height: 80, + } + const result = await loadHTML(html, opts); + const expectDataURL = await parseHTMLToDataURL(html, opts); + const expectImage = await loadImage(expectDataURL); + expect(result.src).toStrictEqual(expectImage.src); + }); + + + test('loadSVG', async () => { + const svg = ``; + const result = await loadSVG(svg); + const expectDataURL = await parseSVGToDataURL(svg); + const expectImage = await loadImage(expectDataURL); + expect(result.src).toStrictEqual(expectImage.src); + }); + +}); + diff --git a/packages/util/__tests__/lib/parser.test.ts b/packages/util/__tests__/lib/parser.test.ts new file mode 100644 index 0000000..32a7800 --- /dev/null +++ b/packages/util/__tests__/lib/parser.test.ts @@ -0,0 +1,51 @@ +import { + parseHTMLToDataURL, parseSVGToDataURL +} from '../../src/lib/parser'; + + +describe('@idraw/util: lib/parser', () => { + + test('parseHTMLToDataURL', async () => { + const result = await parseHTMLToDataURL(` + + + `, { + width: 120, + height: 80, + }); + expect(result).toStrictEqual(`data:image/svg+xml;charset=utf-8;base64,CiAgICA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEyMCIgaGVpZ2h0ID0gIjgwIj4KICAgICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgPGRpdiB4bWxucyA9ICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj4KICAgICAgICAgIAogICAgPHN0eWxlPgogICAgLmJ0biB7CiAgICAgIGxpbmUtaGVpZ2h0OiAxLjU3MTU7CiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICBmb250LXdlaWdodDogNDAwOwogICAgICB3aGl0ZS1zcGFjZTogbm93cmFwOwogICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IG5vbmU7CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50OwogICAgICBib3gtc2hhZG93OiAwIDJweCAjMDAwMDAwMDQ7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7CiAgICAgIGhlaWdodDogMzJweDsKICAgICAgcGFkZGluZzogNHB4IDE1cHg7CiAgICAgIGZvbnQtc2l6ZTogMTRweDsKICAgICAgYm9yZGVyLXJhZGl1czogMnB4OwogICAgICBjb2xvcjogIzAwMDAwMGQ5OwogICAgICBiYWNrZ3JvdW5kOiAjZmZmOwogICAgICBib3JkZXItY29sb3I6ICNkOWQ5ZDk7CiAgICB9CiAgICA8L3N0eWxlPgogICAgPGJ1dHRvbiBjbGFzcz0iYnRuIiA+CiAgICAgIDxzcGFuPkJ1dHRvbjwvc3Bhbj4KICAgIDwvYnV0dG9uPgogICAgCiAgICAgICAgPC9kaXY+CiAgICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDwvc3ZnPgogICAg`); + }); + + + test('parseSVGToDataURL', async () => { + const result = await parseSVGToDataURL(``); + + expect(result).toStrictEqual(`data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNjIyNTI0NzgwNjYzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjgzNjUiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODgxIDQ0Mi40SDUxOS43djE0OC41aDIwNi40Yy04LjkgNDgtMzUuOSA4OC42LTc2LjYgMTE1LjgtMzQuNCAyMy03OC4zIDM2LjYtMTI5LjkgMzYuNi05OS45IDAtMTg0LjQtNjcuNS0yMTQuNi0xNTguMi03LjYtMjMtMTItNDcuNi0xMi03Mi45czQuNC00OS45IDEyLTcyLjljMzAuMy05MC42IDExNC44LTE1OC4xIDIxNC43LTE1OC4xIDU2LjMgMCAxMDYuOCAxOS40IDE0Ni42IDU3LjRsMTEwLTExMC4xYy02Ni41LTYyLTE1My4yLTEwMC0yNTYuNi0xMDAtMTQ5LjkgMC0yNzkuNiA4Ni0zNDIuNyAyMTEuNC0yNiA1MS44LTQwLjggMTEwLjQtNDAuOCAxNzIuNFMxNTEgNjMyLjggMTc3IDY4NC42QzI0MC4xIDgxMCAzNjkuOCA4OTYgNTE5LjcgODk2YzEwMy42IDAgMTkwLjQtMzQuNCAyNTMuOC05MyA3Mi41LTY2LjggMTE0LjQtMTY1LjIgMTE0LjQtMjgyLjEgMC0yNy4yLTIuNC01My4zLTYuOS03OC41eiIgcC1pZD0iODM2NiIgZmlsbD0iIzEyOTZkYiI+PC9wYXRoPjwvc3ZnPg==`); + }); + + +}); + diff --git a/packages/util/src/lib/loader.ts b/packages/util/src/lib/loader.ts index f8eda6a..5f664a5 100644 --- a/packages/util/src/lib/loader.ts +++ b/packages/util/src/lib/loader.ts @@ -1,4 +1,5 @@ -const { Image, Blob, FileReader } = window; +import { parseHTMLToDataURL, parseSVGToDataURL } from './parser'; +const { Image } = window; export function loadImage(src: string): Promise { return new Promise((resolve, reject) => { @@ -13,52 +14,17 @@ export function loadImage(src: string): Promise { } -export function loadSVG(svg: string): Promise { - return new Promise((resolve, reject) => { - const _svg = svg; - const image = new Image(); - const blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8'}); - const reader = new FileReader(); - reader.readAsDataURL(blob); - reader.onload = function (event: ProgressEvent) { - const base64: string = event?.target?.result as string; - image.onload = function() { - resolve(image); - }; - image.src = base64; - }; - reader.onerror = function(err) { - reject(err); - }; - }); +export async function loadSVG(svg: string): Promise { + const dataURL = await parseSVGToDataURL(svg); + const image = await loadImage(dataURL); + return image; +} + + +export async function loadHTML(html: string, opts: { width: number, height: number }): Promise { + const dataURL = await parseHTMLToDataURL(html, opts); + const image = await loadImage(dataURL); + return image; } -export function loadHTML(html: string, opts: { width: number, height: number }): Promise { - const { width, height } = opts; - return new Promise((resolve, reject) => { - const _svg = ` - - -
- ${html} -
- - - `;; - const image = new Image(); - const blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8'}); - const reader = new FileReader(); - reader.readAsDataURL(blob); - reader.onload = function (event: ProgressEvent) { - const base64: string = event?.target?.result as string; - image.onload = function() { - resolve(image); - }; - image.src = base64; - }; - reader.onerror = function(err) { - reject(err); - }; - }); -} \ No newline at end of file diff --git a/packages/util/src/lib/parser.ts b/packages/util/src/lib/parser.ts new file mode 100644 index 0000000..9e4a081 --- /dev/null +++ b/packages/util/src/lib/parser.ts @@ -0,0 +1,41 @@ +export function parseHTMLToDataURL(html: string, opts: { width: number, height: number }): Promise { + const { width, height } = opts; + return new Promise((resolve, reject) => { + const _svg = ` + + +
+ ${html} +
+ + + `; + const blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8'}); + const reader = new FileReader(); + reader.readAsDataURL(blob); + reader.onload = function (event: ProgressEvent) { + const base64: string = event?.target?.result as string; + resolve(base64) + }; + reader.onerror = function(err) { + reject(err); + }; + }); +} + + +export function parseSVGToDataURL(svg: string): Promise { + return new Promise((resolve, reject) => { + const _svg = svg; + const blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8'}); + const reader = new FileReader(); + reader.readAsDataURL(blob); + reader.onload = function (event: ProgressEvent) { + const base64: string = event?.target?.result as string; + resolve(base64); + }; + reader.onerror = function(err) { + reject(err); + }; + }); +}