{"id":20159524,"url":"https://github.com/sner21/watermark-layer","last_synced_at":"2025-06-23T19:04:23.378Z","repository":{"id":205467439,"uuid":"637705390","full_name":"sner21/watermark-layer","owner":"sner21","description":"用拖动的方式在页面区域添加logo或水印，支持图片、文字、背景文字。","archived":false,"fork":false,"pushed_at":"2024-08-17T05:32:40.000Z","size":2255,"stargazers_count":47,"open_issues_count":0,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-23T19:04:20.344Z","etag":null,"topics":["js","logo","watermark"],"latest_commit_sha":null,"homepage":"https://watermark-layer.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sner21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-08T08:35:39.000Z","updated_at":"2025-05-01T12:21:49.000Z","dependencies_parsed_at":"2023-11-12T08:27:52.808Z","dependency_job_id":"67a0dc7a-8ef0-42ef-8ed4-0a9db0121f6b","html_url":"https://github.com/sner21/watermark-layer","commit_stats":null,"previous_names":["sner21/mark-layer","sner21/watermark-layer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sner21/watermark-layer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sner21%2Fwatermark-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sner21%2Fwatermark-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sner21%2Fwatermark-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sner21%2Fwatermark-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sner21","download_url":"https://codeload.github.com/sner21/watermark-layer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sner21%2Fwatermark-layer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261539319,"owners_count":23174135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js","logo","watermark"],"created_at":"2024-11-14T00:08:44.465Z","updated_at":"2025-06-23T19:04:23.288Z","avatar_url":"https://github.com/sner21.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003ewatermark-layer \u003c/h1\u003e \n\n### 用拖动的方式在页面区域添加 logo 或水印，并可单独导出水印层。\n预览地址 : https://watermark-layer.vercel.app/\n\n![GitHub license](./demo.png)\n\n## 简介\n\n1. 用拖动的方式在页面区域添加 logo 或水印，支持图片、文字、背景文字。\n2. 支持单独导出标识图层, 可用于前端预览后端处理 pdf/tiff 等格式的场景, 减少前后端的定位偏差。\n3. 可直接导出处理后的图片, 用于简单处理的场景.\n4. 图片水印可滚轮调整大小, 其他类型也可通过参数调整.\n\n## 安装\n\n```bash\nnpm install watermark-layer\nor\npnpm install watermark-layer\n```\n\n## 使用\n\n```html\n\n\u003cdiv id=\"canvas-con\"\u003e\n\t\u003cimg src=\"test.jpg\" alt=\"\" style=\"display: block;\" class=\"test-img\"\u003e\n\u003c/div\u003e\n```\n\n```js\nimport markRender from 'watermark-layer'\n\nmarkCon = markRender({\n    target: document.querySelector('#canvas-con')\n})\n```\n\n### 选项\n\n```js\nimport markRender from 'watermark-layer'\n\nconst option = {\n    // 需要转换的目标容器 (必需项)\n    // 如目标为 img 或其它单标签元素，target 需要选定等宽高的容器元素，类似 cropperjs。\n    target: document.querySelector('#canvas-con'),\n    markClass: 'layer-mark', // 自定义印记的类名 选中的印记为markClass + -active (可选)\n    zIndex: 1000, // 容器图层的层级 (可选)\n    cancelEvent: false, //是否注销默认默认拖动缩放等事件(可选)\n    markClick(index) {// 标识的点击事件 ( 可选)\n        i.value = index\n    },\n    markDrag(index) {// 标识的拖拽事件 ( 可选)\n        console.log(index)\n    }\n}\nconst style = reactive({ // 可选\n    color: 'black', // 文字的字体颜色\n    fontSize: 24, // 字号\n    fontFamily: '微软雅黑', // 字体\n    rotate: 0, // 旋转角度\n    opicity: 0.5, // 透明度\n    marginTop: 5, // 纵向间距\n    marginLeft: 5, // 横向间距\n    scale: 1, // 初始缩放比例（图片）\n})\ndocument.querySelector('.test-img').addEventListener('load', async () =\u003e {\n    // 创建编辑图层\n    markCon = markRender(option)\n    // 添加图片\n    markCon.appendMark('logo.png')\n    // 添加文字\n    markCon.appendText(text.value, style)\n    // 添加背景文字\n    markCon.appendRepeatText(repeatText.value, style)\n    // 导出图片\n    await markCon.exportImage()\n    // 单独导出标识图层\n    await markCon.exportMark()\n    // 删除标识\n    markCon.deleteMark(index)\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsner21%2Fwatermark-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsner21%2Fwatermark-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsner21%2Fwatermark-layer/lists"}