New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make png js browserified work with fetch streams in the browser #128
Comments
Answer: No, you can't, fetch/browser streams are a different API/system to the Node/fs ones.There's probably a clever solution to this, and it would also nice if someone added a good solution to the library.Shite Workaround: Don't bother with streams, just parse it:For posterity; You can actually use the async
Don't be confused by it being called 'levelData', I'm just storing data in a perfectly normal PNG. |
PS: Not currently closing, as it still seems a major shortcoming that should probably be addressed. If any contributors see this, feel free to close as a 'won't fix' if you think it's not worth the effort to build in support. |
Sorry no idea, I’ve never needed to use this in the browser. I’ve renamed and will keep it open. |
Hi, Is there any update on this, I am facing a similar issue. I want to pass a Any help on how to workaround this would be really great, Thanks. |
same error ~ |
@sniggyfigbat Your solution works great. How do you write to a file? Example:
I parse the PNG with the arraybuffer, all works
Then I get error png.pipeTo is not a function FYI: If I try await Cheers! |
@delebash I've no idea, I'm afraid. I haven't touched the project I needed this for in two years, and I don't remember much in the way of details. Sorry! |
TY. I have made some progress. I am now using |
I came to the same conclusion as @sniggyfigbat , but using async/await. Obviously if streams worked, that could potentially be more efficient since it could leverage streams to parse large files. Oh well. Here's my async/await version to decode a fetched image: async function decode(response) {
const buffer = await response.arrayBuffer();
const png = await new Promise((resolve, reject) =>
new PNG().parse(buffer, (err, data) =>
err ? reject(err) : resolve(data)
)
);
}
// ...
const fetchedImage = await fetch('./a.png');
const decodedImage = await decodeImage(fetchedImage);
console.log('decoded', decodedImage); |
Interestingly node.js has supported web streams since version 16. The fix in the library probably revolves around replacing the streams it uses with web streams. 🤔 |
I'm attempting to use PNGJS to read and write raw pixel data for a browser-based game. I'm using the browserified version of the library (
const PNG = require('pngjs/browser').PNG;
), and I'm simply attempting to populate a PNG object from a served .png file. As far as I can tell, the library intends me to do this from a stream, and thus I'm using thefetch
method built into the browser, which returns a ReadableStream.The appropriate excerpt from my code:
This looks like it should work;
pipeTo
requires aWriteableStream
, which the PNG object seems to be(?). Unfortunately, practice does not support theory, as testing this in Chrome throws an error at thepipeTo
statement:TypeError: Failed to execute 'pipeTo' on 'ReadableStream': Illegal invocation
Which isn't very explicit, and leaves me rather flummoxed.
Given my state of confusion, I just wanted to check that I'm not completely misunderstanding something, and I'm not busily using two different non-interactive APIs with exactly the same name or whatever. This is something which should work, right?
The text was updated successfully, but these errors were encountered: