Comments (7)
probably related to leeoniya/RgbQuant.js#7
from ditherit-v2.
Hi thanks for submitting this! This does seem like something obvious to resolve, maybe the RGBquant fork that is mentioned in that issue is something I should look into.
from ditherit-v2.
I think an easy solution could be just adding an option to copy the alpha channel from the input to the output, not sure how well it optimizes the size, but it can be optimized later using optipng or something.
from ditherit-v2.
that could work. I'll give it a try when i've got time!
from ditherit-v2.
I started to look into this, and I will just note that the Bayer (Ordered) dither mode does support transparency.
from ditherit-v2.
Worked on this a little more and it seems that it is too intensive to copy the alpha value of every pixel on the original image, and move that to the output, at least as far as I know how to do it. Using a simple for loop, I tried to copy the alpha values of a relatively small (500x400ish) image, and just that alone crashed the browser tab as it has to iterate through over a million RGBA values.
Maybe there is a more performant way to do it?
Also, this stack overflow is pretty interesting, it covers how to preserve transparency when copy a png to a canvas, which is what we are doing, but the problem is that rgbquant needs to do its thing on the image data, and so there is no way to not lose the alpha values from what I can tell.
This all continues to point towards needing to fix the issuein RGBQuant, or switch to the potentially more modern rgbquant alternative: https://github.com/ibezkrovnyi/image-quantization
from ditherit-v2.
OK I did finally resolve this issue using @Krasjet suggestion:
I think an easy solution could be just adding an option to copy the alpha channel from the input to the output, not sure how well it optimizes the size, but it can be optimized later using optipng or something.
I forked RGBQuant.js and added code to track the transparent pixels, and then re-transparent them after the dither. Seems to work fine? Havent tested anything about how it affects speed or size, but it seems fine for now.
from ditherit-v2.
Related Issues (17)
- Weird behavior file size HOT 15
- Better png compression
- Keeps saving to SVG and not PNG HOT 7
- Ability to control number of default colors detected
- Option to download all images HOT 2
- Uncaught TypeError: "width" is read-only HOT 10
- Make readme image a static asset
- Redo palette UI so that all buttons fit in box
- Implement a CLI way of calling dither-it HOT 3
- Black and White Modes are Stored with 32 Bit Color Depth HOT 1
- Add more dithering methods HOT 9
- what's more between implement details and standard methods? HOT 2
- Add Gamma Correction HOT 4
- Variable tile size HOT 1
- Serpentine option: span should be label HOT 1
- Drag & drop image HOT 2
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 ditherit-v2.