{"id":13518937,"url":"https://github.com/brianium/watermarkjs","last_synced_at":"2025-09-28T20:31:55.588Z","repository":{"id":31121164,"uuid":"34680710","full_name":"brianium/watermarkjs","owner":"brianium","description":":rice_scene: Watermarking for the browser","archived":true,"fork":false,"pushed_at":"2020-09-29T07:51:08.000Z","size":1265,"stargazers_count":1733,"open_issues_count":30,"forks_count":232,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-01-17T03:43:53.564Z","etag":null,"topics":["functional","javascript","watermark-image"],"latest_commit_sha":null,"homepage":"http://brianium.github.io/watermarkjs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brianium.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-27T17:28:24.000Z","updated_at":"2025-01-06T13:28:26.000Z","dependencies_parsed_at":"2022-08-14T00:40:10.313Z","dependency_job_id":null,"html_url":"https://github.com/brianium/watermarkjs","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianium%2Fwatermarkjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianium%2Fwatermarkjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianium%2Fwatermarkjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianium%2Fwatermarkjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianium","download_url":"https://codeload.github.com/brianium/watermarkjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234328567,"owners_count":18814998,"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":["functional","javascript","watermark-image"],"created_at":"2024-08-01T05:01:51.053Z","updated_at":"2025-09-28T20:31:50.080Z","avatar_url":"https://github.com/brianium.png","language":"JavaScript","readme":"# watermark.js [![Build Status](https://travis-ci.org/brianium/watermarkjs.svg?branch=master)](https://travis-ci.org/brianium/watermarkjs)\n\nA functional library for watermarking images in the browser. Written with ES6, and made available\nto current browsers via [Babel](https://babeljs.io/). Supports urls, file inputs, blobs, and on-page images.\n\n**Note:**\nFor anyone that is interested: I ported this to a ClojureScript library called\n[Dandy Roll](https://github.com/brianium/dandy-roll).\n\n## Tested Browsers\n\nAny browser supporting [File](https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility) and [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility) should work. The following browsers have been\ntested and work:\n\n* IE10 (Windows 7)\n* Chrome 42 (OS X 10.10.3)\n* Firefox 38 (OS X 10.10.3)\n* Safari 8.0.6 (OS X 10.10.3)\n* Opera 29.0 (OS X 10.10.3)\n\nPlease feel free to update this list or submit a fix for a particular browser via a pull request.\n\n## Installing\n\nwatermark.js is available via npm and bower:\n\n```\n# install via npm\n$ npm install watermarkjs\n\n# install via bower\n$ bower install watermarkjs\n```\n\n## Usage\n\n```js\n// watermark by local path\nwatermark(['img/photo.jpg', 'img/logo.png'])\n  .image(watermark.image.lowerRight(0.5))\n  .then(img =\u003e document.getElementById('container').appendChild(img));\n\n// load a url and file object\nconst upload = document.querySelector('input[type=file]').files[0];\nwatermark([upload, 'img/logo.png'])\n  .image(watermark.image.lowerLeft(0.5))\n  .then(img =\u003e document.getElementById('container').appendChild(img));\n\n// watermark from remote source\nconst options = {\n  init(img) {\n    img.crossOrigin = 'anonymous'\n  }\n};\nwatermark(['http://host.com/photo.jpg', 'http://host.com/logo.png'], options)\n  .image(watermark.image.lowerRight(0.5))\n  .then(img =\u003e document.getElementById('container').appendChild(img));\n```\n\n## Building\n\nBefore building or testing, install all the deps:\n\n```\nnpm i\n```\n\nThere is an npm script you can run to build:\n\n```\nnpm run build\n```\n\nOr to kick off the file watcher and build as you make changes, run the start task:\n\n```\n$ npm start\n```\n\n## Testing\n\nThere is an npm script for that too!:\n\n```\n$ npm test\n```\n\nThis library uses the [Jest](https://facebook.github.io/jest/) testing framework. Due to some current\nissues with Jest, Node 0.10.x is required to run the tests.\n\n## Examples\n\nYou can view examples and documentation by running the `sync` task via npm:\n\n```\n$ npm run sync\n```\nThe examples demonstrate using watermark images and text, as well as a demonstration\nof uploading a watermarked image to Amazon S3. It is the same content hosted at\n[http://brianium.github.io/watermarkjs/](http://brianium.github.io/watermarkjs/).\n\n## Development\n\nRunning `npm run dev` will start a browser and start watching source files for changes.\n\n## Motivation\n\n* Not every server has image libraries (shared hosting anyone?)\n* Not every server has reliable concurrency libs for efficient uploading (shared hosting anyone?)\n* JavaScript is fun and cool - more so with ES6\n\nClearly watermarking on the client has some limitations when watermarking urls and on-page elements. The curious can find urls for non-watermarked images, but it is likely that most average users won't go down this path - keeping this soft barrier useful. However!...\n\nwatermark.js has the ability to accept file inputs as a source for watermarking. This makes it easy to preview, watermark, and upload without the non-watermarked image ever becoming public. Check out the [uploading](http://brianium.github.io/watermarkjs/uploading.html) demo to see this in action.\n\nThis tool certainly shines in admin or CMS environments where you want to generate watermarks and upload them asynchronously where it would not be possible or preferable on the server. One less thing the server has to do can be a good thing :)\n\n## Suggestions? Improvements?\n\nPlease open issues or pull requests if you have bugs/improvements.\n","funding_links":[],"categories":["JavaScript","Images","13. 页面交互"],"sub_categories":["Save","13.4 图片轮播(幻灯片)/图片展示  ###","13.4 图片轮播(幻灯片)/图片展示"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianium%2Fwatermarkjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianium%2Fwatermarkjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianium%2Fwatermarkjs/lists"}