gcas-imaged

GCAS Imaged Tools

A no-dependency toolset for manipulating images in the browser. Currently only Crop is implemented.

Features:

• Lightweight;
• No-dependencies;
• Uses Shadow DOM (doesn't affect external CSS);
• Invoked with a simple call;
• Does not change existing DOM elements (other than inserting a single absolutely-positioned div);
• TypeScript.

Crop (demo)

In-place cropping tool intended for (but not limited to) selecting images for upload. Just invoke the Crop object on any image you have in the DOM.

Doesn't alter the original image element at all, it just overlays ontop of it; this means you can place and style your source image however you like before cropping.

Layout requirement

Important! The source image must reside in a relatively positioned container and the container must take the exact size of the image.

I found this to be is the easiest way to implement perfect crop layout regardless of scenario. Making the tool auto-responsive without this requirement would complicate things a lot (observers, events, altering the DOM... and still not perfect).

Usage

• Load dist/Crop.js on your page, however you like:
  • use <script src=".../Crop.js"> in the browser;
  • use import Crop from "gcas-imaged/dist/Crop"; if in modules (e.g. typescript);
• Ensure the source image exists on the page in the following layout:

  <div style="position: relative; display: inline-flex">
      <img id="source" src="..." ... crossorigin />
  </div>

  • position: relative is important so Crop can take the size of this container (absolute or fixed are also fine);
  • display: inline-flex is only used here to make sure the container takes the exact size of the image;
  • crossorigin is also important (required for internal canvas);
• Once the image loads, call new Crop("#source", { /* options */ });
• Done.

Documentation

I had no time for that; please see the comments in src/Crop.ts and the exposed (public) methods.

See also the test/crop.html file for usage examples.