@@ -82,6 +82,8 @@ Different OpenCV 3.x base images can be found here: https://hub.docker.com/r/jus
82
82
83
83
## Usage with Electron
84
84
85
+ ### [ opencv-electron] ( https://github.com/justadudewhohacks/opencv-electron ) - example for opencv4nodejs with electron
86
+
85
87
Add the following script to your package.json:
86
88
``` python
87
89
" electron-rebuild" : " electron-rebuild -w opencv4nodejs"
@@ -259,19 +261,27 @@ const matRGB = new cv.Mat([matR, matB, matG]);
259
261
### Drawing a Mat into HTML Canvas
260
262
261
263
``` javascript
262
- const matBGR = ... ;
263
- // convert your Mat to rgba space
264
- const matRGBA = matBGR .cvtColor (cv .COLOR_BGR2RGBA );
265
- // get raw Mat data
266
- const matDataRaw = matRGBA .getData ();
264
+ const img = ...
265
+
266
+ // convert your image to rgba color space
267
+ const matRGBA = img .channels === 1
268
+ ? img .cvtColor (cv .COLOR_GRAY2RGBA )
269
+ : img .cvtColor (cv .COLOR_BGR2RGBA );
270
+
271
+ // create new ImageData from raw mat data
272
+ const imgData = new ImageData (
273
+ new Uint8ClampedArray (matRGBA .getData ()),
274
+ img .cols ,
275
+ img .rows
276
+ );
267
277
268
- // fill canvas pixels
278
+ // set canvas dimensions
269
279
const canvas = document .getElementById (' myCanvas' );
280
+ canvas .height = img .rows ;
281
+ canvas .width = img .cols ;
282
+
283
+ // set image data
270
284
const ctx = canvas .getContext (' 2d' );
271
- const imgData = ctx .getImageData (0 , 0 , matRGBA .cols , matRGBA .rows );
272
- for (let i = 0 ; i < matDataRaw .length ; i += 1 ) {
273
- imgData .data [i] = matDataRaw[i];
274
- }
275
285
ctx .putImageData (imgData, 0 , 0 );
276
286
```
277
287
0 commit comments