Taggd 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00972/article/details/142200481

Taggd 开源项目教程

taggd A tool to show and add tags to images 项目地址: https://gitcode.com/gh_mirrors/ta/taggd

1、项目介绍

Taggd 是一个用于在图像上添加可点击标签的开源 JavaScript 库。它允许用户在图片上添加标签，并通过点击标签来触发相应的事件。Taggd 的设计简洁且易于使用，适用于各种需要图片标注的场景，如电子商务、博客、新闻等。

2、项目快速启动

安装

首先，通过 npm 或 yarn 安装 Taggd：

npm install taggd

或者

yarn add taggd

使用

在你的 HTML 文件中引入 Taggd 和必要的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taggd 示例</title>
    <link rel="stylesheet" href="node_modules/taggd/dist/taggd.css">
</head>
<body>
    <img id="image" src="your-image.jpg" alt="示例图片">

    <script src="node_modules/taggd/dist/taggd.js"></script>
    <script>
        const image = document.querySelector('#image');
        const options = {
            items: [
                { x: 0.5, y: 0.5, text: '中心标签' },
                { x: 0.2, y: 0.2, text: '左上标签' },
                { x: 0.8, y: 0.8, text: '右下标签' }
            ]
        };

        const taggd = new Taggd(image, options);
    </script>
</body>
</html>