Progressive Web App for editing multiple photos at once.
Home Page: https://photostack.app
License: GNU General Public License v3.0
Sent by Jeb Eldridge ([email protected]). Created by fire.
Please add an option to bulk-export an icon "for web use" that re-saves the icon several times in several sizes and uses a naming convention the user chooses.
Possible solution: https://stackoverflow.com/a/19262385
Example endpoint, where the images are URLs converted into URI components:
https://photostack.app/v1/?import=img1.jpg,img2.png
Stuff that needs to happen:
One nice use for a browser extension would be to add PhotoStack functionality to the Lightroom web app.
When selecting multiple images in the album view of the Lightroom web app, the DIV element containing the photos have a .selected class. The first child DIV of the selected DIV has a background image with a URL like this:
https://lightroom.adobe.com/v2c/catalogs/ABC/revisions/XZY
By covering the URL into this format, you get the full-quality edited image rendered as a JPEG:
https://dl.lightroom.adobe.com/catalogs/ABC/assets/XYZ
With this method, it wouldn't be too hard to add a 'Open in PhotoStack' button to the multi-select bar:
Another potential use for a browser extension companion could be adding an 'Open in Photostack' menu item when right-clicking on images on any page.
Add ability to directly export images to a Dropbox folder.
For simplicity's sake, all of PhotoStack's image processing (importing/exporting photos, mainly) is currently done in Data URL format. Images should be processed in Blob format instead, to reduce memory usage and increase performance.
After v1.0 is done, PhotoStack should be submitted to Appscope and the Chrome Web Store.
Not sure how feasible this is, but it would be nice for pictures downloaded from Google Photos and other similar services.
Needed for app installation.
Add ability to import photos by sharing them to PhotoStack, via the Share Target API.
https://developers.google.com/web/updates/2018/12/web-share-target
The index page should be an information page, with a button at the top for launching the web app (which could be moved to /app or /editor.html?).
The landing page should showcase features, highlight how PhotoStack is open-source, and include links to donate.
Add option to export final images as every file type supported by HTML Canvas, with a quality slider for JPG images (there's a slider Bootstrap element).
There may be JS libraries for exporting to non-native file formats too. WebP would be nice.
Add page to offline cache: https://dl.dropboxusercontent.com/1/view/qu97tup2p1onhi0/Memes/beep%20beep%20uber%20here.jpg sw.js:28:17
Loaded image URL: https://dl.dropboxusercontent.com/1/view/qu97tup2p1onhi0/Memes/beep%20beep%20uber%20here.jpg editor.js:177:21
Add page to offline cache: https://dl.dropboxusercontent.com/1/view/bcnl24s5dw0ba23/Memes/Birdbath%20dog.jpg sw.js:28:17
Loaded image URL: https://dl.dropboxusercontent.com/1/view/bcnl24s5dw0ba23/Memes/Birdbath%20dog.jpg editor.js:177:21
There should be a dark mode switch somewhere, as well as support for the CSS dark mode attribute. The app can switch to this Bootstrap theme when dark mode is activated: https://bootswatch.com/darkly/
Some browsers block multiple downloads, so there needs to be a warning that the export won't work.
A small modal that says something like "There was an error, try again." should appear whenever there is a JavaScript error.
It should be possible for PhotoStack to support the same browsers that the Bootstrap UI supports. There should also be HTML warnings for old versions of IE and browsers.
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
Beyond Chrome and Firefox, IE10+, MS Edge, and Edge Mobile should work.
https://www.chromestatus.com/feature/4777349178458112
This should land in Chrome 75 for Android.
The browser should show a warning when the user tries to leave the main editor, as all imported photos and edits would be lost.
All app settings should be able to be exported to a file, for importing on another device/browser. The settings file should contain any saved watermarks, probably as Data URLs.
https://github.com/WICG/web-share-target/blob/master/docs/explainer.md
PhotoStack should act as a target for URLs, then run the existing Import from URL function. There would need to be additional client-side logic to check if the file is actually an image (MIME type?). If possible, the check should be added to the existing URL import feature, so it will improve both URL and Web Share imports.
Beyond that, PhotoStack should act as a receiver for images, if possible.
Maybe "i" for import, "e" for export, and so on. There also needs to be a help dialog with a list of the shortcuts.
On first visit, a pop-up should appear giving basic instructions on how to use the app, with text for both desktop and mobile layouts.
Looks like Microsoft's API supports Data URLs as input, just like Dropbox's.
It would be neat if pasting a tweet link in the Import URL box would pull images from the tweet. We could also use a regex to pull the full-resolution orig file.
The best solution might be to pull the source code using CORS Anywhere and look for <img> tags.
An updated UI is being worked on in the dev branch.
Goals for desktop:
Goals for mobile:
position: sticky?)Goals for both:
alert() and prompt() messages with Bootstrap modals, to avoid breakage when the user's browser is set to block all JavaScript alertsThe preview window isn't visible on mobile unless the user scrolls down all the way to the bottom of the page. One possible solution would be to add a button to 'pop-out' the preview into a floating window using the Picture-in-Picture API.
https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
I'm not sure if it's possible to request a PiP for an image element.
Add ability to directly export images to a Google Drive folder.
Add option to resize image to a certain maximum width/height.
Greetings, fire here!
@corbindavenport recently invited @fire-bot to this repository. Before fire is enabled, @corbindavenport needs to complete a few steps:
Only @corbindavenport will be able to enable fire using the above link. If someone added fire by mistake, feel free to remove @fire-bot from your repo's collaborators.
Some local files seem to be imported with zero bytes of data.
To speed up performance, the image preview on the main editor page should be downscaled before adding watermarks and applying other effects.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.