How to add .xmp preset file to an image in html website

Question

I am creating a website for users to upload an image and a filter to be added on the image. I created the filters using presets in Photoshop. I have the filters saved as .xmp files but don't know how to add these presets to the user-uploaded images in html/css/javascript. Does anyone know of a method to do this?

Answer 1

Use XMP Parser,

<script src="dist/xmp.iife.min.js"></script>
<script>
let input = document.querySelector("input[type='file']");
input.addEventListener("change", (e) => {
    let file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = e => {
        let xmp = new XMP(e.target.result),
            raw = xmp.find(),
            parsed = xmp.parse();
        // do what you want with `raw` or `parsed` XMP
    };
    reader.readAsDataURL(file);
})
</script>

Source: https://www.npmjs.com/package/xmp-js/v/0.0.4