We url-encode images dropped on the factory plugin. This captures the sharing dynamics expected of the federation but it doesn't match with current asset practices.
✔ We've written scripts that replace huge images in pages with much smaller copies. gist
✔ We've modified Factory to resize and compress large images before posting. See Factory Image Artifacts
We think all of the logic described here could be realized with a single enhanced image plugin running in the client and on the node server.
Pixel manipulations work on canvas objects. Most browsers can convert these back to jpg. webpage
See Journal Duplication
See Pluto, Image of the Year
See Assets in IPFS
<h3> Sizes
We can expect to handle images at varying scale. A good strategy would be to keep highly compressed thumbnails in the page, url encoded. Other sizes could be served as needed from the originating server.
Thumbnail. Small enough to url encode. Resample to 200px or less.
Snapshot. Small enough to transform interactively. Resample to 600-800px.
Original File. Save as dropped without resampling.
<h3> Interaction
A drop should save the thumbnail immediately, compressing the dropped picture if necessary. Asset enabled servers could then open a background websocket to upload the higher resolutions.
Double clicking a thumbnail should open the snapshot which might have been preloaded. The snapshot viewer can offer access to higher resolutions as well as single click navigation around pages of images.
Caption edits should not duplicate the url-encoded thumbnail. There should be no need to drop images to scratch pages.
<h3> Transformation
Image edits should accumulate transformations from the original image(s) while saving the resulting image in the thumbnail and possibly elsewhere.
Support crop, rotate and possibly tilt.
Support hi, lo and mid gamma and possibly shadow/highlight enhancement.
Support y/r croma and possibly color temperature.
Transform snapshot for thumbnail, full screen for snapshot, etc. Approximate slow transformations at lower resolution then compute higher resolutions in the background.
CanmanJS works in browser or node. website
Pixastic appears full featured and popular. website
<h3> Interoperation
Is there some way to capture a picture from a camera-phone directly into wiki?
Can we dig the geocodes out of images and show them on a map? See About Map Plugin
Can we handle other media similar ways? Audio annotations of images? Videos?
Can we recognize drops from web page images? How about Flickr where we can get higher resolution?
Can we drop a directory of images and recognize it as such? How about making pages for each day from the timestamps? And rename the pages when we get to it?
<h3> References
How to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. webpage
OpenSeadragon. An open-source, web-based viewer for high-resolution zoomable images, implemented in pure JavaScript, for desktop and mobile. site
Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS. github
See Pitchers in Wiki, Soviet Control Panels, Computational Photography