Online editor and JavaScript library for XMP data in image files. Library mode supports browser and Node.js environments. XMP is a data format to store any set of standardized and custom metadata properties in digital documents and data sets. Currently reading and writing JPG images is supported. PNG and GIF support will be added later. Contributions are always welcome.
Visit: https://xmp-editor.archilogic.com
WARNING: This is still work in progress. Expect API changes.
<!DOCTYPE html>
<html>
<head>
<!-- Load lib via CDN -->
<script src="https://code.archilogic.com/xmp-editor/xmpEditor.umd.min.js"></script>
</head>
<body>
<!-- XMP code will be displayed here -->
<pre id="xmp-code"></pre>
<script>
// Image URL to read XMP from
var imageUrl =
"https://storage.3d.io/535e624259ee6b0200000484/2019-06-16_00-16-32_1BCodw/004.jpg";
// Fetch image as arrayBuffer
xmpEditor.helpers.urlToArrayBuffer(imageUrl).then(function(arrBuf) {
// Extract XMP as text. You can use a XML parser to read the nodes.
var xmpStr = xmpEditor.jpgReadXmp(arrBuf);
// Show XMP in DOM
document.getElementById("xmp-code").textContent = xmpStr;
// Generate new XMP from template
var xmpStr = xmpEditor.helpers.createNewXmp();
});
</script>
</body>
</html>Install:
npm install archilogic-com/xmp-editor#masterUse:
const { jpgReadXmp } = require('archilogic-com/xmp-editor#master')
const pathUtil = require('path')
const { promisify } = require('util')
const { readFile } = require('fs')
async function getXmpString(imgPath) {
// Read file from disk
const buf = await promisify(readFile)(imgPath)
// Convert to array buffer
const arrBuf = new Uint8Array(buf).buffer
// Extract XMP string
return jpgReadXmp(arrBuf)
}
const IMG_PATH = pathUtil.resolve(`image-with-xmp-metadata.jpg`)
getXmpString(IMG_PATH).then(console.log)npm install
npm run serve
npm run build
npm run test
npm run lint
npm run test:unit
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent