hdr-canvas 0.0.5 → 0.0.7
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +12 -3
- package/dist/hdr-canvas.cjs +21 -1
- package/dist/hdr-canvas.cjs.map +1 -1
- package/dist/hdr-canvas.d.ts +3 -1
- package/dist/hdr-canvas.js +20 -2
- package/dist/hdr-canvas.js.map +1 -1
- package/dist/hdr-canvas.min.js +1 -1
- package/dist/hdr-canvas.min.js.map +1 -1
- package/package.json +2 -2
- package/src/@types/HDRCanvas.d.ts +1 -0
- package/src/hdr-canvas.ts +24 -1
- package/src/index.ts +1 -1
package/README.md
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
# `hdr-canvas`
|
2
2
|
|
3
|
-
This
|
3
|
+
This module contains a collection of functions and classes to work with the HDR support for HTML `canvas` elements in chromium based (like Chrome, Edge, Opera and Brave) browsers.
|
4
4
|
|
5
|
-
|
5
|
+
**This should only be considered as proof of concept or alpha code, don't use it in production environments!**
|
6
6
|
|
7
|
-
|
7
|
+
**Especially operations on the `ImageData` arrays are not optimized, e.g. quite slow.**
|
8
8
|
|
9
9
|
# Feature detection
|
10
10
|
|
@@ -28,6 +28,8 @@ if (checkHDRCanvas()) {
|
|
28
28
|
}
|
29
29
|
```
|
30
30
|
|
31
|
+
This can be useful to add a warning (using the [`fillText()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText) method) to the canvas if it doesn't support HDR content.
|
32
|
+
|
31
33
|
## Example `checkHDRCanvas()`
|
32
34
|
|
33
35
|
```javascript
|
@@ -106,6 +108,10 @@ Use it as you'll do with a `WebGPURenderer`.
|
|
106
108
|
renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });
|
107
109
|
```
|
108
110
|
|
111
|
+
# Example
|
112
|
+
|
113
|
+
See [this](https://christianmahnke.de/en/post/hdr-image-analysis/) blog post for an example in action, requires a Chromium based browser (like Chrome, Edge, Opera and Brave) and a HDR-enable monitor.
|
114
|
+
|
109
115
|
---
|
110
116
|
|
111
117
|
# TODO
|
@@ -115,3 +121,6 @@ The following things might be improved:
|
|
115
121
|
- Try to detect change of screen for HDR detection
|
116
122
|
- Improve speed
|
117
123
|
- Provide WebWorker
|
124
|
+
- Documentation
|
125
|
+
- Link to browser HDR support
|
126
|
+
- Document `Uint16Image`
|
package/dist/hdr-canvas.cjs
CHANGED
@@ -5934,14 +5934,34 @@ function checkHDRCanvas() {
|
|
5934
5934
|
}
|
5935
5935
|
}
|
5936
5936
|
|
5937
|
+
const hdr_options = { colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: 'float16' };
|
5937
5938
|
function initHDRCanvas(canvas) {
|
5938
5939
|
canvas.configureHighDynamicRange({ mode: 'extended' });
|
5939
|
-
const ctx = canvas.getContext("2d",
|
5940
|
+
const ctx = canvas.getContext("2d", hdr_options);
|
5940
5941
|
return ctx;
|
5941
5942
|
}
|
5943
|
+
function defaultGetContextHDR() {
|
5944
|
+
HTMLCanvasElement.prototype._getContext = HTMLCanvasElement.prototype.getContext;
|
5945
|
+
HTMLCanvasElement.prototype.getContext = function (type, options) {
|
5946
|
+
if (options !== undefined) {
|
5947
|
+
options = Object.assign({}, options, hdr_options);
|
5948
|
+
}
|
5949
|
+
else {
|
5950
|
+
options = hdr_options;
|
5951
|
+
}
|
5952
|
+
return this._getContext(type, options);
|
5953
|
+
};
|
5954
|
+
}
|
5955
|
+
function resetGetContext() {
|
5956
|
+
if (typeof HTMLCanvasElement.prototype._getContext === "function") {
|
5957
|
+
HTMLCanvasElement.prototype.getContext = HTMLCanvasElement.prototype._getContext;
|
5958
|
+
}
|
5959
|
+
}
|
5942
5960
|
|
5943
5961
|
exports.Uint16Image = Uint16Image;
|
5944
5962
|
exports.checkHDR = checkHDR;
|
5945
5963
|
exports.checkHDRCanvas = checkHDRCanvas;
|
5964
|
+
exports.defaultGetContextHDR = defaultGetContextHDR;
|
5946
5965
|
exports.initHDRCanvas = initHDRCanvas;
|
5966
|
+
exports.resetGetContext = resetGetContext;
|
5947
5967
|
//# sourceMappingURL=hdr-canvas.cjs.map
|