Skip to content

Commit 90865d3

Browse files
triniwiztriniwiz
committed
feat: ImageBitmap support
closes : #27
1 parent 222fb5e commit 90865d3

File tree

68 files changed

+3691
-7773
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+3691
-7773
lines changed

‎CanvasNative.podspec

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ Pod::Spec.new do |s|
22

33
s.name = "CanvasNative"
44

5-
s.version = "0.9.17"
5+
s.version = "0.9.18"
66

77
s.summary = "A Canvas library"
88

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/canvas-polyfill/index.ts

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,37 @@ import { Document } from './DOM/Document';
1313
import './window';
1414
import './resize';
1515
import './process';
16-
import { TextDecoder, TextEncoder } from '@nativescript/canvas';
16+
import { TextDecoder, TextEncoder, ImageBitmap } from '@nativescript/canvas';
1717
import { URL } from './URL';
1818
(global as any).document = (global as any).window.document = (global as any).document || new Document();
1919

20-
(global as any).window.createImageBitmap = (global as any).createImageBitmap = (image) =>{
20+
(global as any).window.createImageBitmap = (global as any).createImageBitmap = (...args) => {
21+
const image = args[0];
22+
const sx_or_options = args[1];
23+
const sy = args[2];
24+
const sw = args[3];
25+
const sh = args[4];
26+
if(typeof sw === 'number' && sw === 0 || typeof sh === 'number' && sh === 0 ){
27+
return Promise.reject(
28+
new RangeError(`Failed to execute 'createImageBitmap' : The crop rect width is 0`)
29+
)
30+
}
2131

22-
}
32+
if (args.length === 1) {
33+
//@ts-ignore
34+
return ImageBitmap.createFrom(image);
35+
} else if (args.length === 2) {
36+
//@ts-ignore
37+
return ImageBitmap.createFrom(image, sx_or_options);
38+
} else if (args.length === 5) {
39+
40+
//@ts-ignore
41+
return ImageBitmap.createFromRect(image, sx_or_options, sy, sw, sh);
42+
} else if (args.length === 6) {
43+
//@ts-ignore
44+
return ImageBitmap.createFromRect(image, sx_or_options, sy, sw, sh, args[5]);
45+
}
46+
};
2347

2448
Object.defineProperty(global, 'Element', {
2549
value: Element,

‎packages/canvas-polyfill/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-polyfill",
3-
"version": "1.0.0-alpha21",
3+
"version": "1.0.0-alpha22",
44
"description": "Polyfill for making NativeScript compatible with web libs like pixi.js, three.js, phaser.js, babylon.js, etc....",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas/ImageBitmap/common.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export abstract class ImageBitmapBase {
2+
private nativeInstance: any;
3+
4+
constructor(nativeInstance: any) {
5+
this.nativeInstance = nativeInstance;
6+
}
7+
8+
get native() {
9+
return this.nativeInstance;
10+
}
11+
abstract readonly width: number;
12+
abstract readonly height: number;
13+
abstract close();
14+
}

‎packages/canvas/ImageBitmap/index.android.ts

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
import { ImageAsset } from '../ImageAsset';
2+
import { ImageData } from '../Canvas2D';
3+
import { ImageBitmapBase } from './common';
4+
import { Canvas } from '../Canvas';
5+
6+
export class ImageBitmap extends ImageBitmapBase {
7+
private constructor(bitmap: any) {
8+
super(bitmap);
9+
}
10+
#width = -1;
11+
#height = -1;
12+
get width(): number {
13+
if (this.#width === -1) {
14+
this.#width = this.native.getWidth();
15+
}
16+
return this.#width;
17+
}
18+
get height(): number {
19+
if (this.#height === -1) {
20+
this.#height = this.native.getHeight();
21+
}
22+
return this.#height;
23+
}
24+
25+
close() {
26+
this.native.close();
27+
}
28+
29+
static fromNative(value) {
30+
if (value instanceof com.github.triniwiz.canvas.TNSImageBitmap) {
31+
return new ImageBitmap(value);
32+
}
33+
return null;
34+
}
35+
36+
private static handleOptions(options, nativeOptions) {
37+
if (options && typeof options === 'object') {
38+
Object.keys(options).forEach((key) => {
39+
const value = options[key];
40+
switch (key) {
41+
case 'flipY':
42+
if (typeof value === 'boolean') {
43+
nativeOptions.setFlipY(value);
44+
}
45+
break;
46+
case 'premultiplyAlpha':
47+
switch (value) {
48+
case 'default':
49+
nativeOptions.setPremultiplyAlpha(com.github.triniwiz.canvas.TNSImageBitmapPremultiplyAlpha.Default);
50+
break;
51+
case 'Premultiply':
52+
nativeOptions.setPremultiplyAlpha(com.github.triniwiz.canvas.TNSImageBitmapPremultiplyAlpha.Premultiply);
53+
case 'none':
54+
nativeOptions.setPremultiplyAlpha(com.github.triniwiz.canvas.TNSImageBitmapPremultiplyAlpha.None);
55+
break;
56+
}
57+
break;
58+
case 'colorSpaceConversion':
59+
switch (value) {
60+
case 'default':
61+
nativeOptions.setColorSpaceConversion(com.github.triniwiz.canvas.TNSImageBitmapColorSpaceConversion.Default);
62+
break;
63+
case 'none':
64+
nativeOptions.setColorSpaceConversion(com.github.triniwiz.canvas.TNSImageBitmapColorSpaceConversion.None);
65+
break;
66+
}
67+
break;
68+
case 'resizeQuality':
69+
switch (value) {
70+
case 'low':
71+
nativeOptions.setResizeQuality(com.github.triniwiz.canvas.TNSImageBitmapResizeQuality.Low);
72+
break;
73+
case 'medium':
74+
nativeOptions.setResizeQuality(com.github.triniwiz.canvas.TNSImageBitmapResizeQuality.Medium);
75+
break;
76+
case 'high':
77+
nativeOptions.setResizeQuality(com.github.triniwiz.canvas.TNSImageBitmapResizeQuality.High);
78+
break;
79+
case 'pixelated':
80+
nativeOptions.setResizeQuality(com.github.triniwiz.canvas.TNSImageBitmapResizeQuality.Pixelated);
81+
break;
82+
}
83+
break;
84+
case 'resizeWidth':
85+
if (typeof value === 'number') {
86+
nativeOptions.setResizeWidth(value);
87+
}
88+
break;
89+
case 'resizeHeight':
90+
if (typeof value === 'number') {
91+
nativeOptions.setResizeHeight(value);
92+
}
93+
break;
94+
}
95+
});
96+
}
97+
}
98+
99+
static createFrom(source: any, options: any) {
100+
return new Promise((resolve, reject) => {
101+
const opts = new com.github.triniwiz.canvas.TNSImageBitmap.Options();
102+
ImageBitmap.handleOptions(options, opts);
103+
if (source instanceof Canvas) {
104+
com.github.triniwiz.canvas.TNSImageBitmap.createFromCanvas(
105+
source.android,
106+
opts,
107+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
108+
onError(error) {
109+
reject(error);
110+
},
111+
onSuccess(bitmap) {
112+
resolve(ImageBitmap.fromNative(bitmap));
113+
},
114+
})
115+
);
116+
} else if (source instanceof ImageBitmap) {
117+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageBitmap(
118+
source.native,
119+
opts,
120+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
121+
onError(error) {
122+
reject(error);
123+
},
124+
onSuccess(bitmap) {
125+
resolve(ImageBitmap.fromNative(bitmap));
126+
},
127+
})
128+
);
129+
} else if (source instanceof ImageAsset) {
130+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
131+
source.native,
132+
opts,
133+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
134+
onError(error) {
135+
reject(error);
136+
},
137+
onSuccess(bitmap) {
138+
resolve(ImageBitmap.fromNative(bitmap));
139+
},
140+
})
141+
);
142+
} else if (source instanceof ImageData) {
143+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
144+
source.native,
145+
opts,
146+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
147+
onError(error) {
148+
reject(error);
149+
},
150+
onSuccess(bitmap) {
151+
resolve(ImageBitmap.fromNative(bitmap));
152+
},
153+
})
154+
);
155+
} else if (source instanceof Blob) {
156+
const bytes = (Blob as any).InternalAccessor.getBuffer(source);
157+
com.github.triniwiz.canvas.TNSImageBitmap.createFromBytesEncoded(
158+
Array.from(bytes),
159+
opts,
160+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
161+
onError(error) {
162+
reject(error);
163+
},
164+
onSuccess(bitmap) {
165+
resolve(ImageBitmap.fromNative(bitmap));
166+
},
167+
})
168+
);
169+
} else if (source && typeof source === 'object' && typeof source.tagName === 'string' && (source.tagName === 'IMG' || source.tagName === 'IMAGE')) {
170+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
171+
source._asset.native,
172+
opts,
173+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
174+
onError(error) {
175+
reject(error);
176+
},
177+
onSuccess(bitmap) {
178+
resolve(ImageBitmap.fromNative(bitmap));
179+
},
180+
})
181+
);
182+
}
183+
});
184+
}
185+
186+
static createFromRect(source: any, sx: number, sy: number, sWidth: number, sHeight: number, options: any) {
187+
return new Promise((resolve, reject) => {
188+
const opts = new com.github.triniwiz.canvas.TNSImageBitmap.Options();
189+
ImageBitmap.handleOptions(options, opts);
190+
if (source instanceof Canvas) {
191+
com.github.triniwiz.canvas.TNSImageBitmap.createFromCanvas(
192+
source.android,
193+
sx,
194+
sy,
195+
sWidth,
196+
sHeight,
197+
opts,
198+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
199+
onError(error) {
200+
reject(error);
201+
},
202+
onSuccess(bitmap) {
203+
resolve(ImageBitmap.fromNative(bitmap));
204+
},
205+
})
206+
);
207+
} else if (source instanceof ImageBitmap) {
208+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageBitmap(
209+
source.native,
210+
sx,
211+
sy,
212+
sWidth,
213+
sHeight,
214+
opts,
215+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
216+
onError(error) {
217+
reject(error);
218+
},
219+
onSuccess(bitmap) {
220+
resolve(ImageBitmap.fromNative(bitmap));
221+
},
222+
})
223+
);
224+
} else if (source instanceof ImageAsset) {
225+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
226+
source.native,
227+
sx,
228+
sy,
229+
sWidth,
230+
sHeight,
231+
opts,
232+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
233+
onError(error) {
234+
reject(error);
235+
},
236+
onSuccess(bitmap) {
237+
resolve(ImageBitmap.fromNative(bitmap));
238+
},
239+
})
240+
);
241+
} else if (source instanceof ImageData) {
242+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
243+
source.native,
244+
sx,
245+
sy,
246+
sWidth,
247+
sHeight,
248+
opts,
249+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
250+
onError(error) {
251+
reject(error);
252+
},
253+
onSuccess(bitmap) {
254+
resolve(ImageBitmap.fromNative(bitmap));
255+
},
256+
})
257+
);
258+
} else if (source instanceof Blob) {
259+
const bytes = (Blob as any).InternalAccessor.getBuffer(source);
260+
com.github.triniwiz.canvas.TNSImageBitmap.createFromBytesEncoded(
261+
Array.from(bytes),
262+
sx,
263+
sy,
264+
sWidth,
265+
sHeight,
266+
opts,
267+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
268+
onError(error) {
269+
reject(error);
270+
},
271+
onSuccess(bitmap) {
272+
resolve(ImageBitmap.fromNative(bitmap));
273+
},
274+
})
275+
);
276+
} else if (source && typeof source === 'object' && typeof source.tagName === 'string' && (source.tagName === 'IMG' || source.tagName === 'IMAGE')) {
277+
console.log(source._asset.native)
278+
com.github.triniwiz.canvas.TNSImageBitmap.createFromImageAsset(
279+
source._asset.native,
280+
sx,
281+
sy,
282+
sWidth,
283+
sHeight,
284+
opts,
285+
new com.github.triniwiz.canvas.TNSImageBitmap.Callback({
286+
onError(error) {
287+
console.log('error',error);
288+
reject(error);
289+
},
290+
onSuccess(bitmap) {
291+
console.log('bitmap',bitmap);
292+
resolve(ImageBitmap.fromNative(bitmap));
293+
},
294+
})
295+
);
296+
}
297+
});
298+
}
299+
}

‎packages/canvas/ImageBitmap/index.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ImageBitmapBase } from './common';
2+
3+
export declare class ImageBitmap extends ImageBitmapBase {
4+
readonly width: number;
5+
readonly height: number;
6+
close(): void;
7+
}

0 commit comments

Comments
 (0)