Skip to content

Commit 0ec851f

Browse files
crandmckcrandmck
committed
Consolidate tasks, add cpp examples
1 parent 9aa2deb commit 0ec851f

File tree

11 files changed

+433
-318
lines changed

11 files changed

+433
-318
lines changed

‎docs/js-sdk/examples/quickstart/rollup-main.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createC2pa } from 'c2pa';
2+
import wasmModule from 'c2pa/dist/assets/wasm/toolkit_bg.wasm';
3+
4+
const sampleImage =
5+
'https://raw.githubusercontent.com/contentauth/c2pa-js/main/tools/testing/fixtures/images/CAICAI.jpg';
6+
7+
(async () => {
8+
// Initialize the c2pa-js SDK
9+
const wasmSrc = await wasmModule();
10+
const c2pa = await createC2pa({
11+
wasmSrc,
12+
workerSrc: 'c2pa.worker.min.js',
13+
});
14+
15+
try {
16+
// Read in our sample image and get a manifest store
17+
const { manifestStore } = await c2pa.read(sampleImage);
18+
console.log('manifestStore', manifestStore);
19+
20+
// Get the active manifest
21+
const activeManifest = manifestStore?.activeManifest;
22+
console.log('activeManifest', activeManifest);
23+
} catch (err) {
24+
console.error('Error reading image:', err);
25+
}
26+
})();

‎docs/js-sdk/examples/quickstart/vite-main.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const sampleImage =
2+
'https://raw.githubusercontent.com/contentauth/c2pa-js/main/tools/testing/fixtures/images/CAICAI.jpg';
3+
4+
(async () => {
5+
// Information about where to fetch the library
6+
const version = '0.17.2';
7+
const libraryUrl = `https://cdn.jsdelivr.net/npm/c2pa@${version}/+esm`;
8+
9+
// Initialize the c2pa-js SDK
10+
const { createC2pa } = await import(libraryUrl);
11+
const c2pa = await createC2pa({
12+
wasmSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/assets/wasm/toolkit_bg.wasm`,
13+
workerSrc: `https://cdn.jsdelivr.net/npm/c2pa@${version}/dist/c2pa.worker.min.js`,
14+
});
15+
16+
// Read in our sample image and get a manifest store
17+
try {
18+
const { manifestStore } = await c2pa.read(sampleImage);
19+
console.log('manifestStore', manifestStore);
20+
21+
// Get the active manifest
22+
const activeManifest = manifestStore?.activeManifest;
23+
console.log('activeManifest', activeManifest);
24+
} catch (err) {
25+
console.error('Error reading image:', err);
26+
}
27+
})();

‎docs/js-sdk/examples/quickstart/webpack-main.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createC2pa } from 'c2pa';
2+
import wasmSrc from 'c2pa/dist/assets/wasm/toolkit_bg.wasm?file';
3+
import workerSrc from 'c2pa/dist/c2pa.worker.min.js?file';
4+
5+
const element = document.createElement('div');
6+
element.innerHTML = `Please view the console`;
7+
document.body.appendChild(element);
8+
9+
const sampleImage =
10+
'https://raw.githubusercontent.com/contentauth/c2pa-js/main/tools/testing/fixtures/images/CAICAI.jpg';
11+
12+
(async () => {
13+
// Initialize the c2pa-js SDK
14+
const c2pa = await createC2pa({
15+
wasmSrc,
16+
workerSrc,
17+
});
18+
19+
try {
20+
// Read in our sample image and get a manifest store
21+
const { manifestStore } = await c2pa.read(sampleImage);
22+
console.log('manifestStore', manifestStore);
23+
24+
// Get the active manifest
25+
const activeManifest = manifestStore?.activeManifest;
26+
console.log('activeManifest', activeManifest);
27+
} catch (err) {
28+
console.error('Error reading image:', err);
29+
}
30+
})();

‎docs/js-sdk/examples/view-manifest/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="../../favicon.svg" />
6+
<link rel="stylesheet" href="../../styles.css" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>active-manifest</title>
9+
</head>
10+
<body>
11+
<table id="results">
12+
<thead>
13+
<th>Property</th>
14+
<th>Value</th>
15+
</thead>
16+
<tbody>
17+
<td colspan="3">Loading&hellip;</td>
18+
</tbody>
19+
</table>
20+
<script type="module" src="./main.ts"></script>
21+
</body>
22+
</html>

‎docs/js-sdk/examples/view-manifest/main.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { createC2pa, selectProducer } from 'c2pa';
2+
import wasmSrc from 'c2pa/dist/assets/wasm/toolkit_bg.wasm?url';
3+
import workerSrc from 'c2pa/dist/c2pa.worker.js?url';
4+
import { parseISO } from 'date-fns';
5+
6+
const sampleImage =
7+
'https://raw.githubusercontent.com/contentauth/c2pa-js/main/tools/testing/fixtures/images/CAICAI.jpg';
8+
9+
(async () => {
10+
let output: string[] = [];
11+
12+
const c2pa = await createC2pa({
13+
wasmSrc,
14+
workerSrc,
15+
});
16+
17+
const { manifestStore, source } = await c2pa.read(sampleImage);
18+
const activeManifest = manifestStore?.activeManifest;
19+
if (activeManifest) {
20+
// Get thumbnail
21+
// Note: You would normally call `dispose()` when working with a
22+
// component-based UI library (e.g. on component un-mount)
23+
// @ts-expect-error noUnusedLocals
24+
const { url, dispose } = source.thumbnail.getUrl();
25+
26+
// Get properties
27+
const properties: Record<string, string | undefined> = {
28+
title: activeManifest.title,
29+
format: activeManifest.format,
30+
claimGenerator: activeManifest.claimGenerator.split('(')[0]?.trim(),
31+
producer: selectProducer(activeManifest)?.name ?? 'Unknown',
32+
thumbnail: `<img src="${url}" class="thumbnail" />`,
33+
ingredients: (activeManifest.ingredients ?? [])
34+
.map((i) => i.title)
35+
.join(', '),
36+
signatureIssuer: activeManifest.signatureInfo?.issuer,
37+
signatureDate: activeManifest.signatureInfo?.time
38+
? parseISO(activeManifest.signatureInfo.time).toString()
39+
: 'No date available',
40+
};
41+
42+
output = Object.keys(properties).map((key) => {
43+
return `
44+
<tr>
45+
<td>${key}</td>
46+
<td>${properties[key]}</td>
47+
</tr>
48+
`;
49+
});
50+
} else {
51+
output.push(`
52+
<tr>
53+
<td colspan="2">No provenance data found</td>
54+
</tr>
55+
`);
56+
}
57+
58+
document.querySelector('#results tbody')!.innerHTML = output.join('');
59+
})();

0 commit comments

Comments
 (0)