Giter Site home page Giter Site logo

Comments (8)

cortopy avatar cortopy commented on June 18, 2024 2

Kindly commenting so that this issue doesn't go stale. I'd be very much interested in finding a solution for this

from blurhash.

Wunkolo avatar Wunkolo commented on June 18, 2024 1

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:
food_ChocoTaco
As its RGB data alone:
food_ChocoTaco-rgb

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.

Wunkolo avatar Wunkolo commented on June 18, 2024 1

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.

tobimori avatar tobimori commented on June 18, 2024 1

Maybe checkout Thumbhash as an alternative that supports alpha: https://github.com/evanw/thumbhash

from blurhash.

cmanning96 avatar cmanning96 commented on June 18, 2024

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.

Wunkolo avatar Wunkolo commented on June 18, 2024

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.

impzero avatar impzero commented on June 18, 2024

Is there a workaround for this, it is a breaking thing for me in my project?

from blurhash.

ShadowJonathan avatar ShadowJonathan commented on June 18, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.