hdr-canvas 0.0.2 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +14 -0
- package/dist/hdr-canvas.cjs +29 -0
- package/dist/hdr-canvas.cjs.map +1 -1
- package/dist/hdr-canvas.d.ts +3 -0
- package/dist/hdr-canvas.js +29 -0
- 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/Uint16Image.ts +35 -1
package/README.md
CHANGED
@@ -2,6 +2,10 @@
|
|
2
2
|
|
3
3
|
This Module contains a collection of functions and classes to work with the HDR support for HTML `canvas` elements i chrome based browsers. This should only be considered as proof of concept or alpha code, don't use it in production environments.
|
4
4
|
|
5
|
+
## Perfomance
|
6
|
+
|
7
|
+
This module is intended as a proof of concept (PoC), especially operations on the `ImageData` arrays are not optimized, e.g. quite slow.
|
8
|
+
|
5
9
|
# Feature detection
|
6
10
|
|
7
11
|
Import the required function(s):
|
@@ -101,3 +105,13 @@ Use it as you'll do with a `WebGPURenderer`.
|
|
101
105
|
```javascript
|
102
106
|
renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });
|
103
107
|
```
|
108
|
+
|
109
|
+
---
|
110
|
+
|
111
|
+
# TODO
|
112
|
+
|
113
|
+
The following things might be improved:
|
114
|
+
|
115
|
+
- Try to detect change of screen for HDR detection
|
116
|
+
- Improve speed
|
117
|
+
- Provide WebWorker
|
package/dist/hdr-canvas.cjs
CHANGED
@@ -5821,6 +5821,23 @@ class Uint16Image {
|
|
5821
5821
|
this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
|
5822
5822
|
}
|
5823
5823
|
}
|
5824
|
+
static async loadSDRImageData(url) {
|
5825
|
+
return fetch(url)
|
5826
|
+
.then((response) => response.blob())
|
5827
|
+
.then((blob) => {
|
5828
|
+
return createImageBitmap(blob);
|
5829
|
+
})
|
5830
|
+
.then((bitmap) => {
|
5831
|
+
const { width, height } = bitmap;
|
5832
|
+
const offscreen = new OffscreenCanvas(width, height);
|
5833
|
+
const ctx = offscreen.getContext("2d");
|
5834
|
+
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(bitmap, 0, 0);
|
5835
|
+
return ctx;
|
5836
|
+
})
|
5837
|
+
.then((ctx) => {
|
5838
|
+
return ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.width, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
|
5839
|
+
});
|
5840
|
+
}
|
5824
5841
|
static fromImageData(imageData) {
|
5825
5842
|
const i = new Uint16Image(imageData.width, imageData.height);
|
5826
5843
|
if (imageData.colorSpace == "srgb") {
|
@@ -5834,6 +5851,13 @@ class Uint16Image {
|
|
5834
5851
|
}
|
5835
5852
|
return i;
|
5836
5853
|
}
|
5854
|
+
static async fromURL(url) {
|
5855
|
+
return Uint16Image.loadSDRImageData(url).then((data) => {
|
5856
|
+
if (data !== undefined) {
|
5857
|
+
return Uint16Image.fromImageData(data);
|
5858
|
+
}
|
5859
|
+
});
|
5860
|
+
}
|
5837
5861
|
setImageData(imageData) {
|
5838
5862
|
this.width = imageData.width;
|
5839
5863
|
this.height = imageData.height;
|
@@ -5848,6 +5872,11 @@ class Uint16Image {
|
|
5848
5872
|
}
|
5849
5873
|
this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
|
5850
5874
|
}
|
5875
|
+
clone() {
|
5876
|
+
const i = new Uint16Image(this.width, this.height, this.colorSpace);
|
5877
|
+
i.data = this.data.slice();
|
5878
|
+
return i;
|
5879
|
+
}
|
5851
5880
|
}
|
5852
5881
|
Uint16Image.DEFAULT_COLORSPACE = "rec2100-hlg";
|
5853
5882
|
Uint16Image.SDR_MULTIPLIER = 2 ** 16 - 1;
|