@blackbyte/sugar 1.0.0-beta.20 → 1.0.0-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/dom/_exports.d.ts +1 -0
- package/dist/js/dom/_exports.js +1 -0
- package/dist/js/dom/_exports.js.map +1 -1
- package/dist/js/dom/canvas/_exports.d.ts +2 -0
- package/dist/js/dom/canvas/_exports.js +3 -0
- package/dist/js/dom/canvas/_exports.js.map +1 -0
- package/dist/js/dom/canvas/drawVideoToCanvas.d.ts +24 -0
- package/dist/js/dom/canvas/drawVideoToCanvas.js +38 -0
- package/dist/js/dom/canvas/drawVideoToCanvas.js.map +1 -0
- package/package.json +1 -1
package/dist/js/dom/_exports.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../src/js/dom/_exports.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../src/js/dom/_exports.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../../src/js/dom/canvas/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @name drawVideoToCanvas
|
|
3
|
+
* @namespace js.dom.css
|
|
4
|
+
* @type Function
|
|
5
|
+
* @platform js
|
|
6
|
+
* @status stable
|
|
7
|
+
*
|
|
8
|
+
* Draw the current frame of a video into a canvas.
|
|
9
|
+
*
|
|
10
|
+
* @param {HTMLVideoElement} $video The video you want to draw into the canvas
|
|
11
|
+
* @param {HTMLCanvasElement} [$canvas] An optional canvas to draw into. If not provided, a new canvas will be created
|
|
12
|
+
*
|
|
13
|
+
* @snippet drawVideoToCanvas($1)
|
|
14
|
+
*
|
|
15
|
+
* @todo tests
|
|
16
|
+
*
|
|
17
|
+
* @example js
|
|
18
|
+
* import { drawVideoToCanvas } from '@blackbyte/sugar/js/dom';
|
|
19
|
+
* const $canvas = drawVideoToCanvas($video);
|
|
20
|
+
*
|
|
21
|
+
* @since 1.0.0
|
|
22
|
+
* @author Olivier Bossel<olivier.bossel@gmail.com>
|
|
23
|
+
*/
|
|
24
|
+
export default function drawVideoToCanvas($video: HTMLVideoElement, $canvas?: HTMLCanvasElement): HTMLCanvasElement;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @name drawVideoToCanvas
|
|
3
|
+
* @namespace js.dom.css
|
|
4
|
+
* @type Function
|
|
5
|
+
* @platform js
|
|
6
|
+
* @status stable
|
|
7
|
+
*
|
|
8
|
+
* Draw the current frame of a video into a canvas.
|
|
9
|
+
*
|
|
10
|
+
* @param {HTMLVideoElement} $video The video you want to draw into the canvas
|
|
11
|
+
* @param {HTMLCanvasElement} [$canvas] An optional canvas to draw into. If not provided, a new canvas will be created
|
|
12
|
+
*
|
|
13
|
+
* @snippet drawVideoToCanvas($1)
|
|
14
|
+
*
|
|
15
|
+
* @todo tests
|
|
16
|
+
*
|
|
17
|
+
* @example js
|
|
18
|
+
* import { drawVideoToCanvas } from '@blackbyte/sugar/js/dom';
|
|
19
|
+
* const $canvas = drawVideoToCanvas($video);
|
|
20
|
+
*
|
|
21
|
+
* @since 1.0.0
|
|
22
|
+
* @author Olivier Bossel<olivier.bossel@gmail.com>
|
|
23
|
+
*/
|
|
24
|
+
export default function drawVideoToCanvas($video, $canvas) {
|
|
25
|
+
if (!$canvas) {
|
|
26
|
+
$canvas = document.createElement('canvas');
|
|
27
|
+
}
|
|
28
|
+
// srt the canvas size
|
|
29
|
+
$canvas.style.width = `${$video.videoWidth}px`;
|
|
30
|
+
$canvas.style.aspectRatio = `${$video.offsetWidth}/${$video.offsetHeight}`;
|
|
31
|
+
$canvas.style.maxWidth = '100%';
|
|
32
|
+
// get the context 2d
|
|
33
|
+
const ctx = $canvas.getContext('2d');
|
|
34
|
+
// draw the video into canvas
|
|
35
|
+
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage($video, 0, 0, $video.videoWidth, $video.videoHeight, 0, 0, $canvas.width, $canvas.height);
|
|
36
|
+
return $canvas;
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=drawVideoToCanvas.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawVideoToCanvas.js","sourceRoot":"","sources":["../../../../src/js/dom/canvas/drawVideoToCanvas.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,MAAwB,EACxB,OAA2B;IAE3B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED,sBAAsB;IACtB,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,MAAM,CAAC,UAAU,IAAI,CAAC;IAC/C,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;IAC3E,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;IAEhC,qBAAqB;IACrB,MAAM,GAAG,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAErC,6BAA6B;IAC7B,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,CACZ,MAAM,EACN,CAAC,EACD,CAAC,EACD,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,WAAW,EAClB,CAAC,EACD,CAAC,EACD,OAAO,CAAC,KAAK,EACb,OAAO,CAAC,MAAM,CACf,CAAC;IAEF,OAAO,OAAO,CAAC;AACjB,CAAC"}
|