Comments (7)
Image resize has a small issue. Sometimes it can throw a 'RangeError: offset is out of bounds' error. My solution on the browser was to add a setTimeout function to the source image's 'src' load event. I also encountered this error on the backend. In theory, the data should be ready when inputting the imageData into the resize function, and adding a delay shouldn't make a difference. However, I'm not sure why adding a delay seems to prevent this problem. I'm not entirely certain about the conditions that trigger this error and whether setTimeout can completely avoid this issue, but it does occur. Perhaps this is an error related to memory leakage, as you have already noticed.
--
Oh, let me correct myself. This issue doesn't seem to be related to image resize because on the browser side, I'm currently using canvas to resize the image, and I'm still encountering this error. My code is a bit messy, and after some time, it's getting difficult to distinguish things clearly.
from jsquash.
Thanks @seabye. It sounds more like asynchronous code issue. I hope cleaning it up makes it easier to work with 👍
from jsquash.
I've also found the source of the memory leak. Looks like this is the culprit is rustwasm/wee_alloc#106. I'll remove that dependency later in the week. It'll add an additional 10KB or so to the wasm file.
I also will note that WASM memory can only grow. For example, if you started a resizing a 2000px by 2000px image it'll grow its memory to allow it to operate on that size. It won't be be able deallocate that memory after it's reserved. This may also make it appear as a "leak". Subsequent resize calls shouldn't grow the memory unless the resize operation is larger than previously reserved memory. The WASM module can be destroyed and this will free up the memory.
One easy way around this is to do the operations in a short-lived WebWorker. This would also speed up your web application as the resizing would happen off the main thread.
from jsquash.
Thanks @seabye, I believe the PNG decoding issue should be fixed with the version I just published, 3.0.1.
I'll leave this open as there is likely still a memory leak issue with the resize module. I'll need to set aside some time in the future to look into that 👍
from jsquash.
It looks like it will be resolved soon. I also noticed that, at first glance in the task manager, even though it increases memory usage when I process thousands or tens of thousands of images in a row, it doesn't seem to crash. However, on the other hand, this kind of mistake might also be considered a memory leak.
Now, I am processing a small number of images on a scheduled basis, and the server is running. To avoid continuous growth, I have made it a sub-thread that closes after the scheduled processing is completed, and currently, this usage seems to be fine. This matter is not urgent for me at the moment, but a few weeks ago, when I was doing a lot of operations, it looked quite alarming. At that time, there were significant issues with PNG, which forced me to handle it with canvas on the browser side. It seems that you have already solved the PNG issue, but I haven't updated and tried that part yet.
By the way, I thought of the magic number. When I was processing a large number of images, I encountered cases where the file extensions did not match the actual formats, and I used the magic number to handle them. Perhaps this is a good idea to enhance the capability of correctly identifying images in order to facilitate matching the decoders. This kind of incorrect file extension might be a common situation, and adding recognition functionality would be convenient for the users. (In the process of handling network images, I would need to create a copy of response.arrayBuffer()
in fetch
and then determine the correct decoder based on that.)
Thank you so much for your hard work!
from jsquash.
Thanks I've just published v2.0.0 that should fix the memory leak issue. Let me know if you have any issues with it!
By the way, I thought of the magic number
That's a great idea! I believe there's already some good solutions out there, at this stage I don't think I'll be considering it. I did find this package that seems actively maintained and may be of use to you
Good luck with your project! 🎉
from jsquash.
Sure. I forgot to search, and inadvertently ended up implementing the format recognition for images myself. If it already exists, there's no need to reinvent the wheel.
🎉 That's great! Now I don't have to consider using Rust FFI.
I'll find some time to run an update again, and if there are any issues, I'll provide feedback.
from jsquash.
Related Issues (20)
- Oxipng multi-threaded mode fails when run from main thread.
- Export single thread only methods for codecs that have multi-threading. HOT 1
- Doesn't work in Vite SSR HOT 5
- Simple CDN example HOT 5
- Cannot find module in sveltekit project HOT 6
- Issues with multi-threaded worker modules and Vite HOT 13
- Basic Node.js Support HOT 1
- Provide way to override WASM file location HOT 2
- Deno fails with "NotSupported: Classic workers are not supported." HOT 1
- Improve @jquash/avif decode speed HOT 6
- @jsquash/png fails to decode some images HOT 14
- Create a reference decode speed benchmark page HOT 1
- Module not found HOT 1
- gif support? HOT 1
- Add type declarations for all wasm files? HOT 5
- jpeg and webp fail to import inside web worker HOT 2
- Nuxt build error: UMD and IIFE output formats are not supported for code-splitting builds. HOT 4
- Passing a custom fetch function
- background execution? 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 jsquash.