Image Assets

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

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.

Snapshots should be usefully stored, viewed and edited in wiki. Full resolution should be possible.

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.

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.

Thumbnails might be cropped tighter and otherwise tweaked without losing the shot's frame.

Caption edits should not duplicate the url-encoded thumbnail. There should be no need to drop images to scratch pages.

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

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?

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