Comments (8)
Kindly commenting so that this issue doesn't go stale. I'd be very much interested in finding a solution for this
from blurhash.
The issue you're seeing too, is that transparent parts of the image can still have color, and despite certain pixels of the image being totally transparent, the RGB color data there is generally undefined. Most compressors and PNG optimizers just put "easy to compress" streaks of pixels there that lend itself to the defate algorithm since that RGB data is not contributing to the final image anyways. Generally, expect garbage data there.
Most algorithms that only care to pick up the RGB data though will wrongfully interpret a transparent image like this:
As its RGB data alone:
The best way I can think of handling this, that lends itself to current RGB-only encoders, is to have a matte
option to encoders, where the user provides an RGB value to clip the transparency to(defaulting to something like white) and to flatten out the transparency while(or before) processing the image.
from blurhash.
The workaround would be to possibly multiply the RGB color channels with the A channel, causing the transparent pixels to contribute less to the generated blurs, but will cause transparent areas to contribute black to the color-averages. Another solution is to use transparency to linearly interpolate between the source image's RGB colors and a specified matte color.
An offline way to accomplish all this, is to just flatten the image to remove transparency ahead of time before generating the blur-hash, like previously mentioned.
The real fix, would be for blur-hash to support Alpha-transparency so that it can properly contribute to the blurred image.
from blurhash.
Maybe checkout Thumbhash as an alternative that supports alpha: https://github.com/evanw/thumbhash
from blurhash.
For what it's worth, if someone could point me in the right direction as to how to implement this (ie if another platform supports it) I would be more than happy to give it a shot! I'm brand new to using this tool and would love to help out
from blurhash.
The specification for the core algorithm is pretty hand-wavy and subjective, but it would be good to have some kind of specification or standard "things to consider" like color space conversions and transparency and all that to guide alternative implementations that would each make compatible results with each other.
Something like transparency would mean that the encoded data would need to include an alpha channel in the color data(RGBA), which would break all current implementations of the encoder and decoder which only expect RGB data as described in the core algorithm.
https://github.com/woltapp/blurhash/blob/master/Algorithm.md#structure
from blurhash.
Is there a workaround for this, it is a breaking thing for me in my project?
from blurhash.
The real fix, would be for blur-hash to support Alpha-transparency so that it can properly contribute to the blurred image.
Could there be a separate issue for that?
from blurhash.
Related Issues (20)
- It takes really long in typescript HOT 4
- Why decoded blurhash is so big? HOT 2
- Unclear on the algorithm's use of DCT
- Language-agnostic test suite HOT 1
- Dedicated repos for different implementations
- encode of blurhash is blocking the rendering of the react page HOT 2
- Different hashes for same picture HOT 4
- ES module import issue HOT 19
- Performance Issue? HOT 1
- Where is the Changelog HOT 2
- Grab average color? HOT 4
- Blurhashes on Roku HOT 1
- Decode produces massive image in dimensions HOT 2
- Blurash decode JS draw single line HOT 1
- BlurHash does not work when `privacy.resistFingerprinting` is enabled HOT 1
- Cloudinary compatibility HOT 1
- Reduce intensity of too dominant colors HOT 1
- Found a possible security concern HOT 1
- Dynamically determine X and Y components based on aspect ratio HOT 1
- Website isn't mobile responsive
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 blurhash.