Skip to content

Commit 8dcd054

Browse files
robertleeplummerjrrobertleeplummerjr
committed
feat: Read from ImageData
And tests and docs
1 parent 49ee619 commit 8dcd054

15 files changed

+127
-19
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -751,6 +751,7 @@ Types that can be used with GPU.js are as follows:
751751
* 'OffscreenCanvas' **New in V2.13**
752752
* 'HTMLImage'
753753
* 'ImageBitmap' **New in V2.14**
754+
* 'ImageData' **New in V2.15**
754755
* 'HTMLImageArray'
755756
* 'HTMLVideo' **New in V2!**
756757
* 'Number'

‎dist/gpu-browser-core.js

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
*
55
* GPU Accelerated JavaScript
66
*
7-
* @version 2.14.0
8-
* @date Wed Jan 26 2022 16:31:42 GMT-0500 (Eastern Standard Time)
7+
* @version 2.15.0
8+
* @date Wed Jan 26 2022 17:11:45 GMT-0500 (Eastern Standard Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -1617,6 +1617,7 @@ class CPUKernel extends Kernel {
16171617
case 'OffscreenCanvas':
16181618
case 'HTMLImage':
16191619
case 'ImageBitmap':
1620+
case 'ImageData':
16201621
case 'HTMLVideo':
16211622
result.push(` const constants_${p} = this._mediaTo2DArray(this.constants.${p});\n`);
16221623
break;
@@ -1662,6 +1663,7 @@ class CPUKernel extends Kernel {
16621663
case 'OffscreenCanvas':
16631664
case 'HTMLImage':
16641665
case 'ImageBitmap':
1666+
case 'ImageData':
16651667
case 'HTMLVideo':
16661668
result.push(` ${variableName} = this._mediaTo2DArray(${variableName});\n`);
16671669
break;
@@ -1709,8 +1711,13 @@ class CPUKernel extends Kernel {
17091711
canvas.height = height;
17101712
}
17111713
const ctx = this.context;
1712-
ctx.drawImage(media, 0, 0, width, height);
1713-
const pixelsData = ctx.getImageData(0, 0, width, height).data;
1714+
let pixelsData;
1715+
if (media.constructor === ImageData) {
1716+
pixelsData = media.data;
1717+
} else {
1718+
ctx.drawImage(media, 0, 0, width, height);
1719+
pixelsData = ctx.getImageData(0, 0, width, height).data;
1720+
}
17141721
const imageArray = new Array(height);
17151722
let index = 0;
17161723
for (let y = height - 1; y >= 0; y--) {
@@ -3880,6 +3887,7 @@ const typeLookupMap = {
38803887
'OffscreenCanvas': 'Array(4)',
38813888
'HTMLImage': 'Array(4)',
38823889
'ImageBitmap': 'Array(4)',
3890+
'ImageData': 'Array(4)',
38833891
'HTMLVideo': 'Array(4)',
38843892
'HTMLImageArray': 'Array(4)',
38853893
'NumberTexture': 'Number',
@@ -8357,6 +8365,7 @@ class WebGLFunctionNode extends FunctionNode {
83578365
case 'OffscreenCanvas':
83588366
case 'HTMLImage':
83598367
case 'ImageBitmap':
8368+
case 'ImageData':
83608369
case 'HTMLVideo':
83618370
retArr.push(`getVec4FromSampler2D(${ markupName }, ${ markupName }Size, ${ markupName }Dim, `);
83628371
this.memberExpressionXYZ(xProperty, yProperty, zProperty, retArr);
@@ -8559,6 +8568,7 @@ class WebGLFunctionNode extends FunctionNode {
85598568
case 'OffscreenCanvas':
85608569
case 'HTMLImage':
85618570
case 'ImageBitmap':
8571+
case 'ImageData':
85628572
case 'HTMLImageArray':
85638573
case 'HTMLVideo':
85648574
case 'ArrayTexture(1)':
@@ -8673,6 +8683,7 @@ const typeMap = {
86738683
'OffscreenCanvas': 'sampler2D',
86748684
'HTMLImage': 'sampler2D',
86758685
'ImageBitmap': 'sampler2D',
8686+
'ImageData': 'sampler2D',
86768687
'HTMLImageArray': 'sampler2DArray',
86778688
};
86788689

@@ -8684,7 +8695,6 @@ const operatorMap = {
86848695
module.exports = {
86858696
WebGLFunctionNode
86868697
};
8687-
86888698
},{"../../utils":113,"../function-node":9}],38:[function(require,module,exports){
86898699
const { WebGLKernelValueBoolean } = require('./kernel-value/boolean');
86908700
const { WebGLKernelValueFloat } = require('./kernel-value/float');
@@ -8757,6 +8767,7 @@ const kernelValueMaps = {
87578767
'OffscreenCanvas': WebGLKernelValueDynamicHTMLImage,
87588768
'HTMLImage': WebGLKernelValueDynamicHTMLImage,
87598769
'ImageBitmap': WebGLKernelValueDynamicHTMLImage,
8770+
'ImageData': WebGLKernelValueDynamicHTMLImage,
87608771
'HTMLImageArray': false,
87618772
'HTMLVideo': WebGLKernelValueDynamicHTMLVideo,
87628773
},
@@ -8788,6 +8799,7 @@ const kernelValueMaps = {
87888799
'OffscreenCanvas': WebGLKernelValueHTMLImage,
87898800
'HTMLImage': WebGLKernelValueHTMLImage,
87908801
'ImageBitmap': WebGLKernelValueHTMLImage,
8802+
'ImageData': WebGLKernelValueHTMLImage,
87918803
'HTMLImageArray': false,
87928804
'HTMLVideo': WebGLKernelValueHTMLVideo,
87938805
}
@@ -8821,6 +8833,7 @@ const kernelValueMaps = {
88218833
'OffscreenCanvas': WebGLKernelValueDynamicHTMLImage,
88228834
'HTMLImage': WebGLKernelValueDynamicHTMLImage,
88238835
'ImageBitmap': WebGLKernelValueDynamicHTMLImage,
8836+
'ImageData': WebGLKernelValueDynamicHTMLImage,
88248837
'HTMLImageArray': false,
88258838
'HTMLVideo': WebGLKernelValueDynamicHTMLVideo,
88268839
},
@@ -8852,6 +8865,7 @@ const kernelValueMaps = {
88528865
'OffscreenCanvas': WebGLKernelValueHTMLImage,
88538866
'HTMLImage': WebGLKernelValueHTMLImage,
88548867
'ImageBitmap': WebGLKernelValueHTMLImage,
8868+
'ImageData': WebGLKernelValueHTMLImage,
88558869
'HTMLImageArray': false,
88568870
'HTMLVideo': WebGLKernelValueHTMLVideo,
88578871
}
@@ -12046,6 +12060,7 @@ const kernelValueMaps = {
1204612060
'OffscreenCanvas': WebGL2KernelValueDynamicHTMLImage,
1204712061
'HTMLImage': WebGL2KernelValueDynamicHTMLImage,
1204812062
'ImageBitmap': WebGL2KernelValueDynamicHTMLImage,
12063+
'ImageData': WebGL2KernelValueDynamicHTMLImage,
1204912064
'HTMLImageArray': WebGL2KernelValueDynamicHTMLImageArray,
1205012065
'HTMLVideo': WebGL2KernelValueDynamicHTMLVideo,
1205112066
},
@@ -12077,6 +12092,7 @@ const kernelValueMaps = {
1207712092
'OffscreenCanvas': WebGL2KernelValueHTMLImage,
1207812093
'HTMLImage': WebGL2KernelValueHTMLImage,
1207912094
'ImageBitmap': WebGL2KernelValueHTMLImage,
12095+
'ImageData': WebGL2KernelValueHTMLImage,
1208012096
'HTMLImageArray': WebGL2KernelValueHTMLImageArray,
1208112097
'HTMLVideo': WebGL2KernelValueHTMLVideo,
1208212098
}
@@ -12110,6 +12126,7 @@ const kernelValueMaps = {
1211012126
'OffscreenCanvas': WebGL2KernelValueDynamicHTMLImage,
1211112127
'HTMLImage': WebGL2KernelValueDynamicHTMLImage,
1211212128
'ImageBitmap': WebGL2KernelValueDynamicHTMLImage,
12129+
'ImageData': WebGL2KernelValueDynamicHTMLImage,
1211312130
'HTMLImageArray': WebGL2KernelValueDynamicHTMLImageArray,
1211412131
'HTMLVideo': WebGL2KernelValueDynamicHTMLVideo,
1211512132
},
@@ -12141,6 +12158,7 @@ const kernelValueMaps = {
1214112158
'OffscreenCanvas': WebGL2KernelValueHTMLImage,
1214212159
'HTMLImage': WebGL2KernelValueHTMLImage,
1214312160
'ImageBitmap': WebGL2KernelValueHTMLImage,
12161+
'ImageData': WebGL2KernelValueHTMLImage,
1214412162
'HTMLImageArray': WebGL2KernelValueHTMLImageArray,
1214512163
'HTMLVideo': WebGL2KernelValueHTMLVideo,
1214612164
}
@@ -14262,6 +14280,8 @@ const utils = {
1426214280
return 'OffscreenCanvas';
1426314281
case ImageBitmap:
1426414282
return 'ImageBitmap';
14283+
case ImageData:
14284+
return 'ImageData';
1426514285
}
1426614286
switch (value.nodeName) {
1426714287
case 'IMG':

‎dist/gpu-browser-core.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/gpu-browser.js

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
*
55
* GPU Accelerated JavaScript
66
*
7-
* @version 2.14.0
8-
* @date Wed Jan 26 2022 16:31:43 GMT-0500 (Eastern Standard Time)
7+
* @version 2.15.0
8+
* @date Wed Jan 26 2022 17:11:45 GMT-0500 (Eastern Standard Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -6070,6 +6070,7 @@ class CPUKernel extends Kernel {
60706070
case 'OffscreenCanvas':
60716071
case 'HTMLImage':
60726072
case 'ImageBitmap':
6073+
case 'ImageData':
60736074
case 'HTMLVideo':
60746075
result.push(` const constants_${p} = this._mediaTo2DArray(this.constants.${p});\n`);
60756076
break;
@@ -6115,6 +6116,7 @@ class CPUKernel extends Kernel {
61156116
case 'OffscreenCanvas':
61166117
case 'HTMLImage':
61176118
case 'ImageBitmap':
6119+
case 'ImageData':
61186120
case 'HTMLVideo':
61196121
result.push(` ${variableName} = this._mediaTo2DArray(${variableName});\n`);
61206122
break;
@@ -6162,8 +6164,13 @@ class CPUKernel extends Kernel {
61626164
canvas.height = height;
61636165
}
61646166
const ctx = this.context;
6165-
ctx.drawImage(media, 0, 0, width, height);
6166-
const pixelsData = ctx.getImageData(0, 0, width, height).data;
6167+
let pixelsData;
6168+
if (media.constructor === ImageData) {
6169+
pixelsData = media.data;
6170+
} else {
6171+
ctx.drawImage(media, 0, 0, width, height);
6172+
pixelsData = ctx.getImageData(0, 0, width, height).data;
6173+
}
61676174
const imageArray = new Array(height);
61686175
let index = 0;
61696176
for (let y = height - 1; y >= 0; y--) {
@@ -8333,6 +8340,7 @@ const typeLookupMap = {
83338340
'OffscreenCanvas': 'Array(4)',
83348341
'HTMLImage': 'Array(4)',
83358342
'ImageBitmap': 'Array(4)',
8343+
'ImageData': 'Array(4)',
83368344
'HTMLVideo': 'Array(4)',
83378345
'HTMLImageArray': 'Array(4)',
83388346
'NumberTexture': 'Number',
@@ -12810,6 +12818,7 @@ class WebGLFunctionNode extends FunctionNode {
1281012818
case 'OffscreenCanvas':
1281112819
case 'HTMLImage':
1281212820
case 'ImageBitmap':
12821+
case 'ImageData':
1281312822
case 'HTMLVideo':
1281412823
retArr.push(`getVec4FromSampler2D(${ markupName }, ${ markupName }Size, ${ markupName }Dim, `);
1281512824
this.memberExpressionXYZ(xProperty, yProperty, zProperty, retArr);
@@ -13012,6 +13021,7 @@ class WebGLFunctionNode extends FunctionNode {
1301213021
case 'OffscreenCanvas':
1301313022
case 'HTMLImage':
1301413023
case 'ImageBitmap':
13024+
case 'ImageData':
1301513025
case 'HTMLImageArray':
1301613026
case 'HTMLVideo':
1301713027
case 'ArrayTexture(1)':
@@ -13126,6 +13136,7 @@ const typeMap = {
1312613136
'OffscreenCanvas': 'sampler2D',
1312713137
'HTMLImage': 'sampler2D',
1312813138
'ImageBitmap': 'sampler2D',
13139+
'ImageData': 'sampler2D',
1312913140
'HTMLImageArray': 'sampler2DArray',
1313013141
};
1313113142

@@ -13137,7 +13148,6 @@ const operatorMap = {
1313713148
module.exports = {
1313813149
WebGLFunctionNode
1313913150
};
13140-
1314113151
},{"../../utils":114,"../function-node":10}],39:[function(require,module,exports){
1314213152
const { WebGLKernelValueBoolean } = require('./kernel-value/boolean');
1314313153
const { WebGLKernelValueFloat } = require('./kernel-value/float');
@@ -13210,6 +13220,7 @@ const kernelValueMaps = {
1321013220
'OffscreenCanvas': WebGLKernelValueDynamicHTMLImage,
1321113221
'HTMLImage': WebGLKernelValueDynamicHTMLImage,
1321213222
'ImageBitmap': WebGLKernelValueDynamicHTMLImage,
13223+
'ImageData': WebGLKernelValueDynamicHTMLImage,
1321313224
'HTMLImageArray': false,
1321413225
'HTMLVideo': WebGLKernelValueDynamicHTMLVideo,
1321513226
},
@@ -13241,6 +13252,7 @@ const kernelValueMaps = {
1324113252
'OffscreenCanvas': WebGLKernelValueHTMLImage,
1324213253
'HTMLImage': WebGLKernelValueHTMLImage,
1324313254
'ImageBitmap': WebGLKernelValueHTMLImage,
13255+
'ImageData': WebGLKernelValueHTMLImage,
1324413256
'HTMLImageArray': false,
1324513257
'HTMLVideo': WebGLKernelValueHTMLVideo,
1324613258
}
@@ -13274,6 +13286,7 @@ const kernelValueMaps = {
1327413286
'OffscreenCanvas': WebGLKernelValueDynamicHTMLImage,
1327513287
'HTMLImage': WebGLKernelValueDynamicHTMLImage,
1327613288
'ImageBitmap': WebGLKernelValueDynamicHTMLImage,
13289+
'ImageData': WebGLKernelValueDynamicHTMLImage,
1327713290
'HTMLImageArray': false,
1327813291
'HTMLVideo': WebGLKernelValueDynamicHTMLVideo,
1327913292
},
@@ -13305,6 +13318,7 @@ const kernelValueMaps = {
1330513318
'OffscreenCanvas': WebGLKernelValueHTMLImage,
1330613319
'HTMLImage': WebGLKernelValueHTMLImage,
1330713320
'ImageBitmap': WebGLKernelValueHTMLImage,
13321+
'ImageData': WebGLKernelValueHTMLImage,
1330813322
'HTMLImageArray': false,
1330913323
'HTMLVideo': WebGLKernelValueHTMLVideo,
1331013324
}
@@ -16499,6 +16513,7 @@ const kernelValueMaps = {
1649916513
'OffscreenCanvas': WebGL2KernelValueDynamicHTMLImage,
1650016514
'HTMLImage': WebGL2KernelValueDynamicHTMLImage,
1650116515
'ImageBitmap': WebGL2KernelValueDynamicHTMLImage,
16516+
'ImageData': WebGL2KernelValueDynamicHTMLImage,
1650216517
'HTMLImageArray': WebGL2KernelValueDynamicHTMLImageArray,
1650316518
'HTMLVideo': WebGL2KernelValueDynamicHTMLVideo,
1650416519
},
@@ -16530,6 +16545,7 @@ const kernelValueMaps = {
1653016545
'OffscreenCanvas': WebGL2KernelValueHTMLImage,
1653116546
'HTMLImage': WebGL2KernelValueHTMLImage,
1653216547
'ImageBitmap': WebGL2KernelValueHTMLImage,
16548+
'ImageData': WebGL2KernelValueHTMLImage,
1653316549
'HTMLImageArray': WebGL2KernelValueHTMLImageArray,
1653416550
'HTMLVideo': WebGL2KernelValueHTMLVideo,
1653516551
}
@@ -16563,6 +16579,7 @@ const kernelValueMaps = {
1656316579
'OffscreenCanvas': WebGL2KernelValueDynamicHTMLImage,
1656416580
'HTMLImage': WebGL2KernelValueDynamicHTMLImage,
1656516581
'ImageBitmap': WebGL2KernelValueDynamicHTMLImage,
16582+
'ImageData': WebGL2KernelValueDynamicHTMLImage,
1656616583
'HTMLImageArray': WebGL2KernelValueDynamicHTMLImageArray,
1656716584
'HTMLVideo': WebGL2KernelValueDynamicHTMLVideo,
1656816585
},
@@ -16594,6 +16611,7 @@ const kernelValueMaps = {
1659416611
'OffscreenCanvas': WebGL2KernelValueHTMLImage,
1659516612
'HTMLImage': WebGL2KernelValueHTMLImage,
1659616613
'ImageBitmap': WebGL2KernelValueHTMLImage,
16614+
'ImageData': WebGL2KernelValueHTMLImage,
1659716615
'HTMLImageArray': WebGL2KernelValueHTMLImageArray,
1659816616
'HTMLVideo': WebGL2KernelValueHTMLVideo,
1659916617
}
@@ -18715,6 +18733,8 @@ const utils = {
1871518733
return 'OffscreenCanvas';
1871618734
case ImageBitmap:
1871718735
return 'ImageBitmap';
18736+
case ImageData:
18737+
return 'ImageData';
1871818738
}
1871918739
switch (value.nodeName) {
1872018740
case 'IMG':

‎dist/gpu-browser.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gpu.js",
3-
"version": "2.14.0",
3+
"version": "2.15.0",
44
"description": "GPU Accelerated JavaScript",
55
"engines": {
66
"node": ">=8.0.0"

‎src/backend/cpu/kernel.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ class CPUKernel extends Kernel {
269269
case 'OffscreenCanvas':
270270
case 'HTMLImage':
271271
case 'ImageBitmap':
272+
case 'ImageData':
272273
case 'HTMLVideo':
273274
result.push(` const constants_${p} = this._mediaTo2DArray(this.constants.${p});\n`);
274275
break;
@@ -314,6 +315,7 @@ class CPUKernel extends Kernel {
314315
case 'OffscreenCanvas':
315316
case 'HTMLImage':
316317
case 'ImageBitmap':
318+
case 'ImageData':
317319
case 'HTMLVideo':
318320
result.push(` ${variableName} = this._mediaTo2DArray(${variableName});\n`);
319321
break;
@@ -361,8 +363,13 @@ class CPUKernel extends Kernel {
361363
canvas.height = height;
362364
}
363365
const ctx = this.context;
364-
ctx.drawImage(media, 0, 0, width, height);
365-
const pixelsData = ctx.getImageData(0, 0, width, height).data;
366+
let pixelsData;
367+
if (media.constructor === ImageData) {
368+
pixelsData = media.data;
369+
} else {
370+
ctx.drawImage(media, 0, 0, width, height);
371+
pixelsData = ctx.getImageData(0, 0, width, height).data;
372+
}
366373
const imageArray = new Array(height);
367374
let index = 0;
368375
for (let y = height - 1; y >= 0; y--) {

‎src/backend/function-node.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1473,6 +1473,7 @@ const typeLookupMap = {
14731473
'OffscreenCanvas': 'Array(4)',
14741474
'HTMLImage': 'Array(4)',
14751475
'ImageBitmap': 'Array(4)',
1476+
'ImageData': 'Array(4)',
14761477
'HTMLVideo': 'Array(4)',
14771478
'HTMLImageArray': 'Array(4)',
14781479
'NumberTexture': 'Number',

‎src/backend/web-gl/function-node.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1251,6 +1251,7 @@ class WebGLFunctionNode extends FunctionNode {
12511251
case 'OffscreenCanvas':
12521252
case 'HTMLImage':
12531253
case 'ImageBitmap':
1254+
case 'ImageData':
12541255
case 'HTMLVideo':
12551256
retArr.push(`getVec4FromSampler2D(${ markupName }, ${ markupName }Size, ${ markupName }Dim, `);
12561257
this.memberExpressionXYZ(xProperty, yProperty, zProperty, retArr);
@@ -1469,6 +1470,7 @@ class WebGLFunctionNode extends FunctionNode {
14691470
case 'OffscreenCanvas':
14701471
case 'HTMLImage':
14711472
case 'ImageBitmap':
1473+
case 'ImageData':
14721474
case 'HTMLImageArray':
14731475
case 'HTMLVideo':
14741476
case 'ArrayTexture(1)':
@@ -1590,6 +1592,7 @@ const typeMap = {
15901592
'OffscreenCanvas': 'sampler2D',
15911593
'HTMLImage': 'sampler2D',
15921594
'ImageBitmap': 'sampler2D',
1595+
'ImageData': 'sampler2D',
15931596
'HTMLImageArray': 'sampler2DArray',
15941597
};
15951598

0 commit comments

Comments
 (0)