Comments (6)
Maybe it has to do with the fact that browsers behave differently for images where no color profile is embedded in the image - see this comparison table at https://www.benq.com/en-us/knowledge-center/knowledge/web-browsers-color-management.html
Perhaps this can be fixed by assigning the sRGB color profile to the rendered canvas image ?
Perhaps the above information at the BenQ website is outdated, but it is worth a try if the issue disappears by explicitly setting the sRGB color space to the rendered images, as explained here:
https://stackoverflow.com/questions/69274916/how-to-specify-color-space-for-canvas-in-javascript
from qgis-js.
Does setting the chrome://flags/#force-color-profile
have an effect on this?
We can try to set srgb
on the ImageData returned form the qgis-js API, as well as in the Canvas. (But this will be the default anyways, so in theory it should have no effect...)
PS: On my system (Ubuntu 22.04 with Wayland) the colors in Firefox and Chromium seem to look the same. I will have a go on some Windows machines over the weekend.
from qgis-js.
Does setting the
chrome://flags/#force-color-profile
have an effect on this?
Yes - there is a huge difference (on Windows 11). Setting it to sRGB makes the colors the same as in QGIS and Firefox, setting this preference to "Default" results in the washed out colors that I described.
Does this mean that there is nothing we could do here - and it is up to the user setting ?
from qgis-js.
The left side is with force-color-profile set to "default", the right side is when set to sRGB
from qgis-js.
One can probably also disable HDR in Windows while leaving Chromiums color profile on "default"?
Could you also do a test, what the following snippet prints to the console, if you paste it to the dev tools of FF and Chromium?
console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
console.log("HDR:", window.matchMedia("(dynamic-range: high)").matches)
from qgis-js.
Chrome 117.0.5938.150 (Official Build) (64-bit Windows):
console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
SDR: true
console.log("HDR:", window.matchMedia("(dynamic-range: high)").matches)
HDR: false
Firefox 117.0.1 (64-Bit Windows):
console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
SDR: true debugger eval code:1:9
console.log("HDR:", window.matchMedia("(dynamic-range: standard)").matches)
HDR: true debugger eval code:1:9
from qgis-js.
Related Issues (20)
- Make sure labels and symbols do not get cut off in XYZ Tiles mode HOT 5
- Support for FeatureInfo (Identify tool)
- Make map view more responsive (larger map view) - or full-screen mode HOT 1
- Larger tile sizes for higher resolution monitors HOT 1
- Map themes in QGIS should be exposed to the JS API HOT 1
- Viewer in full screen shows with black background
- Loading a WMS/WMTS layer causes infinite loop HOT 1
- @qgis-js/utils is not usable for external projects HOT 1
- Layer opacity below 1 results in unwanted graying effect HOT 1
- QGIS layers within layer groups with visibility=false cannot be displayed HOT 2
- Expose QgsLayerTree in the API HOT 2
- Relative SVG files do not render HOT 9
- integrating qgis into expressJs based web application for tiff images HOT 3
- Vector / raster tiles layer throws error when rendering
- Raster layer with a remote COG fails to load HOT 1
- Loading expressions throws RuntimeError HOT 4
- Loading a project fails with RuntimeError: index out of bounds HOT 4
- Can projects ship thier own fonts? HOT 2
- Labels are rendered too small on high DPI devices HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qgis-js.