Content-Length: 855078 | pFad | http://github.com/NativeScript/canvas/commit/e179122faa6647e5137546fb6926e67793adcdcf

E4 fix(polyfill): improve svg loading · NativeScript/canvas@e179122 · GitHub
Skip to content

Commit e179122

Browse files
triniwiztriniwiz
committed
fix(polyfill): improve svg loading
1 parent 5028b71 commit e179122

File tree

1 file changed

+164
-63
lines changed

1 file changed

+164
-63
lines changed

‎packages/canvas-polyfill/DOM/HTMLImageElement.ts

Lines changed: 164 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { knownFolders, path, File, Utils, Image, Screen } from '@nativescript/core';
22
// @ts-ignore
3-
import { ImageAsset } from '@nativescript/canvas';
3+
import { ImageAsset, TextDecoder } from '@nativescript/canvas';
44
import { HTMLElement } from './HTMLElement';
55
import { Svg } from '@nativescript/canvas-svg';
66

@@ -169,64 +169,102 @@ export class HTMLImageElement extends HTMLElement {
169169

170170
_load() {
171171
this._loading = true;
172+
const async = this.decoding !== 'sync';
172173
if (this.src && typeof this.src === 'string') {
173174
if (this.src.startsWith('blob:nativescript/')) {
174175
const data = (<any>URL).InternalAccessor.getData(this.src);
175176
const buffer = (<any>Blob).InternalAccessor.getBuffer(data.blob);
176177

177178
let isSvg = data?.type?.indexOf('svg') > -1;
178-
let src;
179-
let d;
180-
if (!isSvg) {
181-
try {
182-
d = new TextDecoder();
183-
src = d.decode(buffer);
184-
if (typeof src === 'string') {
185-
isSvg = src.indexOf('<svg') > -1;
186-
}
187-
} catch (error) {}
188-
}
179+
const d = new TextDecoder();
189180

190-
if (isSvg) {
191-
d = d ?? new TextDecoder();
192-
src = src ?? d.decode(buffer);
193-
Svg.fromSrc(src)
194-
.then((svg) => {
195-
const data = svg.data;
196-
return this._asset.loadFromBytes(svg.width, svg.height, data as any);
181+
if (async) {
182+
d.decodeAsync(buffer)
183+
.then((res) => {
184+
if (typeof res === 'string') {
185+
isSvg = res.indexOf('<svg') > -1;
186+
}
187+
return isSvg ? res : null;
197188
})
198-
.then((done: boolean) => {
199-
this.width = this._asset.width;
200-
this.height = this._asset.height;
201-
this.complete = done;
202-
this._loading = false;
203-
this._dispatchDecode(done);
189+
.then((res) => {
190+
if (typeof res === 'string') {
191+
return Svg.fromSrc(res)
192+
.then((svg) => {
193+
const data = svg.data;
194+
return this._asset.loadFromBytes(svg.width, svg.height, data as any);
195+
})
196+
.then((done: boolean) => {
197+
this.width = this._asset.width;
198+
this.height = this._asset.height;
199+
this.complete = done;
200+
this._loading = false;
201+
this._dispatchDecode(done);
202+
});
203+
}
204204
})
205205
.catch((e) => {
206-
this.dispatchEvent({ type: 'error', target: this, e });
207-
this._onerror?.();
208-
this._loading = false;
209-
this._dispatchDecode();
206+
this._asset
207+
.loadFromEncodedBytes(buffer)
208+
.then((done: boolean) => {
209+
this.width = this._asset.width;
210+
this.height = this._asset.height;
211+
this.complete = done;
212+
this._loading = false;
213+
this._dispatchDecode(done);
214+
})
215+
.catch((e) => {
216+
this.dispatchEvent({ type: 'error', target: this, error: e, e });
217+
this._onerror?.();
218+
this._loading = false;
219+
this._dispatchDecode();
220+
});
210221
});
211-
return;
212222
} else {
213-
this._asset
214-
.loadFromEncodedBytes(buffer)
215-
.then((done: boolean) => {
216-
this.width = this._asset.width;
217-
this.height = this._asset.height;
218-
this.complete = done;
219-
this._loading = false;
220-
this._dispatchDecode(done);
221-
})
222-
.catch((e) => {
223-
this.dispatchEvent({ type: 'error', target: this, e });
224-
this._onerror?.();
225-
this._loading = false;
226-
this._dispatchDecode();
227-
});
228-
return;
223+
try {
224+
const src = d.decode(buffer);
225+
if (typeof src === 'string') {
226+
isSvg = src.indexOf('<svg') > -1;
227+
}
228+
229+
const svg = Svg.fromSrcSync(this.src);
230+
231+
if (svg) {
232+
if (this._asset.loadFromBytesSync(svg.width, svg.height, svg.data as any)) {
233+
this.width = this._asset.width;
234+
this.height = this._asset.height;
235+
this.complete = true;
236+
this._loading = false;
237+
this._dispatchDecode(true);
238+
} else {
239+
this.dispatchEvent({ type: 'error', target: this });
240+
this._onerror?.();
241+
this._loading = false;
242+
this._dispatchDecode();
243+
}
244+
} else {
245+
const loaded = this._asset.fromFileSync(src);
246+
if (loaded) {
247+
this.width = this._asset.width;
248+
this.height = this._asset.height;
249+
this.complete = true;
250+
this._loading = false;
251+
this._dispatchDecode(true);
252+
} else {
253+
this.dispatchEvent({ type: 'error', target: this });
254+
this._onerror?.();
255+
this._loading = false;
256+
this._dispatchDecode();
257+
}
258+
}
259+
} catch (e) {
260+
this.dispatchEvent({ type: 'error', target: this, error: e, e });
261+
this._onerror?.();
262+
this._loading = false;
263+
this._dispatchDecode();
264+
}
229265
}
266+
267+
return;
230268
}
231269

232270
if (this.src.startsWith && this.src.startsWith('data:')) {
@@ -304,7 +342,6 @@ export class HTMLImageElement extends HTMLElement {
304342
}
305343

306344
this.dispatchEvent({ type: 'loading', target: this });
307-
let async = this.decoding !== 'sync';
308345
if (this.src.startsWith('http')) {
309346
if (!async) {
310347
const loaded = this._asset.fromUrlSync(this.src);
@@ -315,11 +352,29 @@ export class HTMLImageElement extends HTMLElement {
315352
this.complete = true;
316353
success = true;
317354
} else {
318-
this.dispatchEvent({ type: 'error', target: this });
319-
this._onerror?.();
355+
// try svg ?
356+
const svg = Svg.fromSrcSync(this.src);
357+
358+
if (svg) {
359+
if (this._asset.loadFromBytesSync(svg.width, svg.height, svg.data as any)) {
360+
this.width = this._asset.width;
361+
this.height = this._asset.height;
362+
this.complete = true;
363+
this._loading = false;
364+
this._dispatchDecode(true);
365+
} else {
366+
this.dispatchEvent({ type: 'error', target: this });
367+
this._onerror?.();
368+
this._loading = false;
369+
this._dispatchDecode(success);
370+
}
371+
} else {
372+
this.dispatchEvent({ type: 'error', target: this });
373+
this._onerror?.();
374+
this._loading = false;
375+
this._dispatchDecode(success);
376+
}
320377
}
321-
this._loading = false;
322-
this._dispatchDecode(success);
323378
} else {
324379
this._asset
325380
.fromUrl(this.src)
@@ -331,10 +386,24 @@ export class HTMLImageElement extends HTMLElement {
331386
this._dispatchDecode(true);
332387
})
333388
.catch((e) => {
334-
this.dispatchEvent({ type: 'error', target: this, error: e });
335-
this._onerror?.();
336-
this._loading = false;
337-
this._dispatchDecode();
389+
Svg.fromSrc(this.src)
390+
.then((svg) => {
391+
const data = svg.data;
392+
return this._asset.loadFromBytes(svg.width, svg.height, data as any);
393+
})
394+
.then((done: boolean) => {
395+
this.width = this._asset.width;
396+
this.height = this._asset.height;
397+
this.complete = done;
398+
this._loading = false;
399+
this._dispatchDecode(done);
400+
})
401+
.catch((_) => {
402+
this.dispatchEvent({ type: 'error', target: this, error: e });
403+
this._onerror?.();
404+
this._loading = false;
405+
this._dispatchDecode();
406+
});
338407
});
339408
}
340409
} else {
@@ -352,10 +421,28 @@ export class HTMLImageElement extends HTMLElement {
352421
this._loading = false;
353422
this._dispatchDecode(true);
354423
} else {
355-
this.dispatchEvent({ type: 'error', target: this });
356-
this._onerror?.();
357-
this._loading = false;
358-
this._dispatchDecode();
424+
// try svg ?
425+
const svg = Svg.fromSrcSync(this.src);
426+
427+
if (svg) {
428+
if (this._asset.loadFromBytesSync(svg.width, svg.height, svg.data as any)) {
429+
this.width = this._asset.width;
430+
this.height = this._asset.height;
431+
this.complete = true;
432+
this._loading = false;
433+
this._dispatchDecode(true);
434+
} else {
435+
this.dispatchEvent({ type: 'error', target: this });
436+
this._onerror?.();
437+
this._loading = false;
438+
this._dispatchDecode();
439+
}
440+
} else {
441+
this.dispatchEvent({ type: 'error', target: this });
442+
this._onerror?.();
443+
this._loading = false;
444+
this._dispatchDecode();
445+
}
359446
}
360447
} else {
361448
this._asset
@@ -368,10 +455,24 @@ export class HTMLImageElement extends HTMLElement {
368455
this._dispatchDecode(true);
369456
})
370457
.catch((e) => {
371-
this.dispatchEvent({ type: 'error', target: this, e });
372-
this._onerror?.();
373-
this._loading = false;
374-
this._dispatchDecode();
458+
Svg.fromSrc(this.src)
459+
.then((svg) => {
460+
const data = svg.data;
461+
return this._asset.loadFromBytes(svg.width, svg.height, data as any);
462+
})
463+
.then((done: boolean) => {
464+
this.width = this._asset.width;
465+
this.height = this._asset.height;
466+
this.complete = done;
467+
this._loading = false;
468+
this._dispatchDecode(done);
469+
})
470+
.catch((_) => {
471+
this.dispatchEvent({ type: 'error', target: this, e });
472+
this._onerror?.();
473+
this._loading = false;
474+
this._dispatchDecode();
475+
});
375476
});
376477
}
377478
}

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/NativeScript/canvas/commit/e179122faa6647e5137546fb6926e67793adcdcf

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy