Taggd is a tool that allows you to tag pictures with additional information.
npm install taggdbower install taggdYou need to include the stylesheet in the <head>-tag, and the script in the <body>-tag. Both files are in the dist directory.
<link rel="stylesheet" href="/path/to/taggd/dist/taggd.css">
The stylesheet has no default theme, so they will be dull default buttons ready for you to style!
<script src="/path/to/taggd/dist/taggd.js"></script>
Finally, you can initialise taggd:
const image = document.getElementById('my-image');
const options = {};
const tags = [];
const taggd = new Taggd(image, options, tags);
The options parameter is a list of options. The tags parameter is a list of Tags. These are the buttons and popup that will render over your image. You can generate these using the Taggd tags generator.
If you’re importing Taggd via the ES2015 syntax with a bundler that respects the module field in package.json, Taggd and Tag are exported separately:
import { Taggd, Tag } from 'taggd';
new Taggd(image, options, [
new Tag(...),
]);
If you include the UMD bundle, Tag is part of the Taggd class:
new Taggd(image, options, [
new Taggd.Tag(...),
]);
The former allows ES2015+ environments to use imports as intended. The latter prevents having to expose multiple classes.
If you have better ideas to have best of both worlds, please create an issue.
For more information, check out the documentation.
The code is released under the MIT license.
FAQs
A tool to show and add tags to images
We found that taggd demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.