Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools. Learn more →
Top 23 JavaScript Image Projects
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
sharp
-
Depending on your requirements and your experience with software development, you could give https://photoswipe.com/ a go. Alternatively, you could use the native gallery block with https://wordpress.org/plugins/lightbox-photoswipe/.
-
Appwrite
Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
-
jimp
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
QR codes are a convenient and efficient way to store and share information. Reading and writing QR codes can easily be done with Node.js, the popular JavaScript runtime environment. In this article, we will go over the steps for reading and writing QR codes in Node using three popular libraries: qrcode-reader and jimp for reading QR codes, and qrcode for generating QR codes.
-
-
This is by the same person who made jspaint. https://github.com/1j01/jspaint Some of the other projects by the author are also very interesting https://github.com/1j01?tab=repositories&q=&type=&language=&...
There is this pipes screen saver for example https://1j01.github.io/pipes/
-
qrcode (https://github.com/soldair/node-qrcode)
-
-
InfluxDB
Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
-
tui.image-editor
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
-
Then pica to resize it and a simple function I wrote to crop it:
-
The OpenSeadragon community already has number of places to hang out, like GitHub, Discord, and Twitter, but why not Reddit too?
-
-
next-optimized-images
🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).
Same. I found this example [1] particularly helpful, although I don't know how good this [2] library it uses is. Overall, I've seen multiple OSS projects [3] that try to support a missing functionality in Next.js seem to just give up trying to keep up with their breaking changes.
[1] https://stackblitz.com/edit/github-mwzv1t?file=README.md
-
glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
I would look at glightbox. I wrote a micro.blog plugin for it that could be easily used on any other Hugo site.
-
meah de popotan, essa extensão é perfeita em casos como esse : https://github.com/dessant/search-by-image
-
Project mention: Beginner developer with some react experience - I want to recreate a certain style | /r/Frontend | 2023-04-24
Parallax: https://simpleparallax.com
-
Project mention: Tips For Building Faster Websites with Efficient CSS Optimisation | dev.to | 2023-08-14
Developers also employ alternative methods for lazy loadings, such as the scroll event listener, besides the Intersection Observer API and the loading property. Unlike the Intersection Observer API, which only monitors the elements targeted for lazy loading, developers attach a scroll event listener to every element on the page. Once the element marked for lazy loading is within the visibility range of the user, a function is invoked to switch the image or video URL with the attribute previously holding it, just like with the Intersection Observer API. This approach is costly for a web project. As the developer seeks to optimise page load by integrating lazy loading to some elements on the webpage, the developer slows down the page's performance due to multiple firing of an event as the function meets each element. Moreover, packages for JavaScript that deal with lazy loading exist. For instance, the LazyLoad library uses the Intersection Observer API, a lightweight JavaScript library. It supports many lazy loading features, such as preloading, responsive image loading, and custom loading animations. Additional lazyloading libraries include Yall.js, Lozad.js, LazyLoad XT for jQuery, and many more.
-
-
-
-
probe-image-size
Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF, SVG, PSD, ICO.
-
Project mention: Need the community's help finding pictures of Finn at TwitchCon | /r/F1NN5TER | 2023-07-10
When you're archiving, make sure you're using this GreaseMonkey script to auto-redirect to higher quality versions of the image.
-
dezoomify
Dezoomify is a web application to download zoomable images from museum websites, image galleries, and map viewers. Many different zoomable image technologies are supported.
Project mention: Vincent van Gogh's 1515 Painting and Drawing Have Been Digitized and Put Online | news.ycombinator.com | 2023-06-28 -
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2023-12-09.
JavaScript Image related posts
- Organize the mess of your photo folders with Node
- Creating Chess Board SVGs, PNGs, and GIFs
- Automated Image Compression: A Vite Plugin Using Sharp
- Textual Paint – MS Paint in your terminal
- Need the community's help finding pictures of Finn at TwitchCon
- Using SVG to create simple sparkline charts
- I offer no solutions.
-
A note from our sponsor - Appwrite
appwrite.io | 11 Dec 2023
Index
What are some of the best open-source Image projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | sharp | 26,836 |
| 2 | PhotoSwipe | 23,389 |
| 3 | jimp | 13,136 |
| 4 | dom-to-image | 9,829 |
| 5 | jspaint | 6,969 |
| 6 | qrcode | 6,929 |
| 7 | gm | 6,897 |
| 8 | tui.image-editor | 6,436 |
| 9 | pica | 3,464 |
| 10 | openseadragon | 2,812 |
| 11 | FFCreator | 2,534 |
| 12 | next-optimized-images | 2,185 |
| 13 | glightbox | 1,793 |
| 14 | search-by-image | 1,734 |
| 15 | simpleParallax | 1,685 |
| 16 | yall.js | 1,345 |
| 17 | jarallax | 1,325 |
| 18 | flutter_image_cropper | 957 |
| 19 | terminal-image | 936 |
| 20 | probe-image-size | 934 |
| 21 | maxurl | 902 |
| 22 | dezoomify | 600 |
| 23 | react-image-magnify | 599 |
Learn any GitHub repo in 59 seconds
Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
getonboard.dev