# @four-corners/fourcorners.js

> The fourcorners.js library displays contextual information defined by the Four Corners Project in each of a photograph’s corners. This increased contextualization strengthens both the authorship of the photographer and the credibility of the image.

Latest version **0.9.6** (published 2023-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @four-corners/fourcorners.js
pnpm add @four-corners/fourcorners.js
yarn add @four-corners/fourcorners.js
bun add @four-corners/fourcorners.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.6 |
| Published | 2023-07-13 |
| First published | 2019-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Corey Tegeler |
| Maintainers | coreytegeler |

## Links

- npm: https://www.npmjs.com/package/@four-corners/fourcorners.js
- Repository: https://github.com/four-corners/fourcorners.js
- Homepage: https://fourcornersproject.org
- Issues: https://github.com/four-corners/fourcorners.js/issues
- npm.io page: https://npm.io/package/@four-corners/fourcorners.js

## Dependencies (4)

- [@contentauth/sdk](https://npm.io/package/@contentauth/sdk.md) ^0.8.12
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.9
- [@babel/plugin-transform-classes](https://npm.io/package/@babel/plugin-transform-classes.md) ^7.16.7

## Recent versions

- 0.9.6 (latest) — 2023-07-13
- 0.9.5 — 2023-06-09
- 0.9.4 — 2023-06-08
- 0.9.3 — 2023-06-08
- 0.9.2 — 2023-06-08
- 0.9.1 — 2023-06-08
- 0.9.0 — 2023-06-08
- 0.8.5 — 2023-06-08
- 0.6.0 — 2021-03-15
- 0.5.0 — 2021-01-07
- 0.3.4 — 2020-06-25
- 0.3.3 — 2020-02-04
- 0.2.0 — 2019-07-03
- 0.1.9 — 2019-06-28
- 0.1.8 — 2019-06-13
- … 3 more at https://npm.io/package/@four-corners/fourcorners.js/versions

## README

# fourcorners.js

The **Four Corners Project** allows specific information to be embedded in each of the photograph’s four corners, where it is available for an interested reader to explore. This increased contextualization strengthens both the authorship of the photographer and the credibility of the image.

**fourcorners.js** is an open source JavaScript library that augments your embedded images with the interactive "four corners" and corresponding contextual data and media.

For inquiries about usage or development contribution, please email [fourcornersphotograph@gmail.com](mailto:fourcornersphotograph@gmail.com).

## Setup

### How to initialize an embed

```js
new FourCorners(selector, options, provenance);
```

#### Default JSON embed
If you are embedding using HTML generated from the Four Corners Project's "[Create your own](https://fourcornersproject.org/en/create/)" page you can ignore the `provenance` argument. Instead, your HTML will include your contextual data in a JSON object wrapped in a `<script>` tag.

```js
new FourCorners(selector, options);
```

#### C2PA embed
If you are using an image file injected with the C2PA and Four Corners metadata, you must first extract the metadata from the image file and then pass as the `provenance` argument.

Add the following in your `<head>` tag:

```html
<script type="module">
import { ContentAuth } from "https://cdn.jsdelivr.net/npm/@contentauth/sdk@0.8.12-alpha.10/dist/cai-sdk.esm.min.js";
import "https://cdn.jsdelivr.net/npm/@contentauth/web-components@0.4.2-alpha.20/dist/index.min.js";
var wasmSrc = "https://cdn.jsdelivr.net/npm/@contentauth/sdk@0.8.12-alpha.10/dist/assets/wasm/toolkit_bg.wasm";
var workerSrc = "https://cdn.jsdelivr.net/npm/@contentauth/sdk@0.8.12-alpha.10/dist/cai-sdk.worker.min.js";
var sdk = new ContentAuth({wasmSrc, workerSrc});
var provenance = await sdk.processImage(imgSrc);
await new FourCorners(selector, options, provenance);
</script>
```

### Basic examples

#### Initialize with string selector
```js
var fc_image = new FourCorners("img.fc-image");
```

#### Initialize with DOM element
```js
var elem = document.querySelector("img.fc-image");
var fc_image = new FourCorners(elem);
```

#### Initialize with options
```js
var fc_image = new FourCorners(elem, {
	caption: true,
	credit: true,
	logo: true,
	dark: true
});
```

### Options

| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `caption` | *boolean* | `false` | Decides if the caption shows under the embed* |
| `credit` | *boolean* | `false` | Decides if the credits show under the embed* |
| `logo` | *boolean* | `false` | Decides if a hyperlinked Four Corners Project logo shows under the embed |
| `dark` | *boolean* | `false` | Decides if the embed UI should be in dark mode |

*\*These fields will always show in the Authorship panel regardless of these settings*

---
_Source: https://npm.io/package/@four-corners/fourcorners.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._