corbindavenport / photostack Goto Github PK

Not sure how feasible this is, but it would be nice for pictures downloaded from Google Photos and other similar services.

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.

https://www.chromestatus.com/feature/4777349178458112

This should land in Chrome 75 for Android.

Some local files seem to be imported with zero bytes of data.

https://www.chromestatus.com/feature/6360971442388992

https://blog.chromium.org/2019/05/chrome-75-beta-low-latency-canvas.html

A small modal that says something like "There was an error, try again." should appear whenever there is a JavaScript error.

https://stackoverflow.com/a/20534588

Needed for app installation.

Greetings, fire here!

@corbindavenport recently invited @fire-bot to this repository. Before fire is enabled, @corbindavenport needs to complete a few steps:

Complete fire setup now

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.

The browser should show a warning when the user tries to leave the main editor, as all imported photos and edits would be lost.

https://stuk.github.io/jszip/

Some browsers block multiple downloads, so there needs to be a warning that the export won't work.

The 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.

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.

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.

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.

To speed up performance, the image preview on the main editor page should be downscaled before adding watermarks and applying other effects.

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.

An updated UI is being worked on in the dev branch.

Goals for desktop:

• Three-column UI on wide screens, on both editor and watermark pages
• Updated preview that doesn't require vertical scrolling, even for tall images

Goals for mobile:

• Move export and import buttons to bottom toolbar
• Move image preview to floating window when the preview is scrolled past (maybe possible with position: sticky?)

Goals for both:

• Replace all alert() and prompt() messages with Bootstrap modals, to avoid breakage when the user's browser is set to block all JavaScript alerts
• Progress bar for multi-file imports that blocks interaction
• Basic tutorial mode
• Installation prompts on PWA-capable browsers
• Button in first page of export popup to send notification when export is completed
• More visible donate links
• Maintain compatibility with older browsers/Internet Explorer

Maybe "i" for import, "e" for export, and so on. There also needs to be a help dialog with a list of the shortcuts.

https://docs.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/save-file?view=odsp-graph-online

Looks like Microsoft's API supports Data URLs as input, just like Dropbox's.

Add option to resize image to a certain maximum width/height.

Sample image: https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/OUYA-Console-set-h.jpg/1280px-OUYA-Console-set-h.jpg

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:

• Create documentation for API, with links to sample usage
• Keep all redirecting/JS code in the single page
• Minify page for quick access
• Determine if it would be possible to support data URLs, if not, then implement data URL blocker
• Add API page to service worker so it works offline

Add ability to directly export images to a Dropbox folder.

https://www.dropbox.com/developers/saver

https://developers.google.com/drive/api/v3/picker

Possible solution: https://stackoverflow.com/a/19262385

• UI should be similar to Lightroom's watermark tool
• Ability to save and export watermarks (probably as JSON file, with image as base64 data?)
• Maybe have watermark management in separate page, and only have a drop-down select on the main page

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.

https://developers.google.com/web/updates/2019/08/native-file-system

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.

After v1.0 is done, PhotoStack should be submitted to Appscope and the Chrome Web Store.

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/

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 ability to directly export images to a Google Drive folder.

https://developers.google.com/drive/api/v3/savetodrive

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.

https://getbootstrap.com/docs/4.3/components/progress/

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

• Allow importing more than one .json file at once
• Read each value in the .json file to localStorage (with error handling), instead of just copying the entire file
• Allow importing .json files from Dropbox, with multi-select

https://docs.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/?view=odsp-graph-online