feat(): remote image loading with ImageAsset an HTMLImageElement

.gitignore

@@ -42,3 +42,4 @@ Thumbs.db
 
 *.tgz
 packages/**/angular/dist
+apps/demo/times.html

CanvasNative.podspec

@@ -2,7 +2,7 @@ Pod::Spec.new do |s|
 
     s.name         = "CanvasNative"
 
-    s.version      = "0.9.4"
+    s.version      = "0.9.7"
 
     s.summary      = "A Canvas library"
 

packages/canvas-polyfill/DOM/Document.ts

@@ -63,6 +63,11 @@ export class Document extends Element {
 
 	getElementById(id) {
 		const topmost = Frame.topmost();
+		if (id instanceof Canvas) {
+			const canvas = new HTMLCanvasElement();
+			canvas._canvas = id;
+			return canvas;
+		}
 		if (topmost) {
 			const nativeElement = topmost.getViewById(id);
 			if (nativeElement) {
@@ -73,4 +78,8 @@ export class Document extends Element {
 		}
 		return new Element("div");
 	}
-}
+
+	querySelector(selector){
+		return new Element(selector);
+	}
+}

packages/canvas-polyfill/DOM/Element.ts

@@ -1,5 +1,5 @@
-import {Node} from "./Node";
-import {Canvas} from '@nativescript/canvas';
+import { Node } from "./Node";
+import { Canvas } from '@nativescript/canvas';
 
 export class Element extends Node {
 	private doc: any;
@@ -9,7 +9,7 @@ export class Element extends Node {
 	namespaceURI: any;
 	nativeElement: any;
 
-	constructor(tagName) {
+	constructor(tagName, canvas = undefined) {
 		super(tagName.toUpperCase());
 
 		this.doc = {
@@ -19,7 +19,11 @@ export class Element extends Node {
 		};
 		this._classList = new Set();
 		if (tagName.toLowerCase() === 'canvas') {
-			this._canvas = Canvas.createCustomView();
+			if (canvas instanceof Canvas) {
+				this._canvas = canvas;
+			} else {
+				this._canvas = Canvas.createCustomView();
+			}
 		}
 	}
 
@@ -111,5 +115,4 @@ export class Element extends Node {
 	get ontouchstart() {
 		return {};
 	}
-}
-
+}

packages/canvas-polyfill/DOM/HTMLImageElement.ts

@@ -1,7 +1,6 @@
 import { Element } from './Element';
-import { knownFolders, path, File, ImageSource } from '@nativescript/core';
+import { knownFolders, path, File } from '@nativescript/core';
 import { ImageAsset } from '@nativescript/canvas';
-
 const background_queue = global.isIOS ? dispatch_get_global_queue(qos_class_t.QOS_CLASS_DEFAULT, 0) : undefined;
 const main_queue = global.isIOS ? dispatch_get_current_queue() : undefined;
 declare var NSUUID, java, NSData, android;
@@ -45,6 +44,8 @@ export class HTMLImageElement extends Element {
 	_imageSource: any;
 	__id: any;
 
+	decoding = 'auto';
+
 	get src() {
 		return this.localUri;
 	}
@@ -78,8 +79,7 @@ export class HTMLImageElement extends Element {
 		super('image');
 		this._asset = new ImageAsset();
 		this.__id = getUUID();
-		// this._load = this._load.bind(this);
-		this._onload = () => {};
+		this._onload = () => { };
 		if (props !== null && typeof props === 'object') {
 			this.src = props.localUri;
 			this.width = props.width;
@@ -88,6 +88,7 @@ export class HTMLImageElement extends Element {
 		}
 	}
 
+
 	_load() {
 		if (this.src) {
 			if (typeof this.src === 'string' && this.src.startsWith && this.src.startsWith('data:')) {
@@ -155,18 +156,54 @@ export class HTMLImageElement extends Element {
 				})();
 				return;
 			}
-			if (!this.width || !this.height) {
-				this.complete = false;
-				this._asset
-					.loadFileAsync(this.src)
-					.then(() => {
-						this.width = this._asset.width;
-						this.height = this._asset.height;
-						this.complete = true;
-					})
-					.catch((e) => {
-						this.emitter.emit('error', { target: this });
-					});
+
+			if (typeof this.src === 'string') {
+				let async = this.decoding !== 'sync';
+				if (this.src.startsWith('http')) {
+					if (!async) {
+						const loaded = this._asset.loadFromUrl(this.src);
+						if (loaded) {
+							this.width = this._asset.width;
+							this.height = this._asset.height;
+							this.complete = true;
+						} else {
+							this.emitter.emit('error', { target: this });
+						}
+					} else {
+						this._asset.loadFromUrlAsync(this.src).then(() => {
+							this.width = this._asset.width;
+							this.height = this._asset.height;
+							this.complete = true;
+						}).catch(e => {
+							this.emitter.emit('error', { target: this });
+						})
+					}
+				} else {
+					if (!this.width || !this.height) {
+						this.complete = false;
+						if (!async) {
+							const loaded = this._asset.loadFile(this.src);
+							if (loaded) {
+								this.width = this._asset.width;
+								this.height = this._asset.height;
+								this.complete = true;
+							} else {
+								this.emitter.emit('error', { target: this });
+							}
+						} else {
+							this._asset
+								.loadFileAsync(this.src)
+								.then(() => {
+									this.width = this._asset.width;
+									this.height = this._asset.height;
+									this.complete = true;
+								})
+								.catch((e) => {
+									this.emitter.emit('error', { target: this });
+								});
+						}
+					}
+				}
 			}
 		}
 	}

packages/canvas-polyfill/async/xhr/TNSXMLHttpRequest.ts

@@ -1,8 +1,8 @@
-import {CancellablePromise, Http} from '../http/http';
-import {HttpError, HttpRequestOptions, ProgressEvent} from '../http/http-request-common';
-import {FileManager} from '../file/file';
-import {isNullOrUndefined, isObject, isFunction} from '@nativescript/core/utils/types';
-import {knownFolders, path as filePath, File as fsFile} from '@nativescript/core';
+import { CancellablePromise, Http } from '../http/http';
+import { HttpError, HttpRequestOptions, ProgressEvent } from '../http/http-request-common';
+import { FileManager } from '../file/file';
+import { isNullOrUndefined, isObject, isFunction } from '@nativescript/core/utils/types';
+import { knownFolders, path as filePath, File as fsFile } from '@nativescript/core';
 
 enum XMLHttpRequestResponseType {
 	empty = '',
@@ -126,7 +126,7 @@ export class TNSXMLHttpRequest {
 		loaded: number;
 		total: number;
 		target: any;
-	} = {lengthComputable: false, loaded: 0, total: 0, target: this};
+	} = { lengthComputable: false, loaded: 0, total: 0, target: this };
 
 	private _headers: any;
 	private _responseURL: string = '';
@@ -150,6 +150,8 @@ export class TNSXMLHttpRequest {
 		return this._response;
 	}
 
+	private _didUserSetResponseType = false;
+
 	get responseType(): any {
 		return this._responseType;
 	}
@@ -286,6 +288,7 @@ export class TNSXMLHttpRequest {
 	}
 
 	set responseType(value: any) {
+		this._didUserSetResponseType = true;
 		if (
 			value === XMLHttpRequestResponseType.empty ||
 			value in XMLHttpRequestResponseType
@@ -421,7 +424,7 @@ export class TNSXMLHttpRequest {
 			this.emitEvent('loadstart', startEvent);
 
 			this._updateReadyStateChange(this.LOADING);
-		
+
 			FileManager.readFile(path, {}, (error, data) => {
 				if (error) {
 					const errorEvent = new ProgressEvent(
@@ -449,7 +452,7 @@ export class TNSXMLHttpRequest {
 
 					this._updateReadyStateChange(this.DONE);
 				} else {
-					if (!this.responseType) {
+					if (!this._didUserSetResponseType) {
 						this._setResponseType();
 					}
 					this._status = 200;
@@ -692,11 +695,12 @@ export class TNSXMLHttpRequest {
 
 		this._currentRequest
 			.then((res) => {
-				this._setResponseType();
+				if (!this._didUserSetResponseType) {
+					this._setResponseType();
+				}
 				this._status = res.statusCode;
 				this._httpContent = res.content;
 				this._responseURL = res.url;
-
 				if (this.responseType === XMLHttpRequestResponseType.json) {
 					if (typeof res.content === 'string') {
 						this._responseText = res.content;
@@ -1097,7 +1101,7 @@ export class Blob {
 	public slice(start?: number, end?: number, type?: string): Blob {
 		const slice = this._buffer.slice(start || 0, end || this._buffer.length);
 
-		return new Blob([slice], {type: type});
+		return new Blob([slice], { type: type });
 	}
 
 	public stream() {