https://github.com/zhensherlock/watermark-js-plus

watermark for the browser
https://github.com/zhensherlock/watermark-js-plus

canvas javascript typescript watermark

Last synced: 6 days ago
JSON representation

watermark for the browser

• Host: GitHub
• URL: https://github.com/zhensherlock/watermark-js-plus
• Owner: zhensherlock
• License: mit
• Created: 2022-10-20T07:22:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-11T16:11:03.000Z (12 days ago)
• Last Synced: 2025-01-12T21:35:46.968Z (11 days ago)
• Topics: canvas, javascript, typescript, watermark
• Language: TypeScript
• Homepage: https://zhensherlock.github.io/watermark-js-plus/
• Size: 36.8 MB
• Stars: 437
• Watchers: 6
• Forks: 28
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


  

    

  





[![][npm-release-shield]][npm-release-link]

[![][npm-downloads-shield]][npm-downloads-link]

[![][package-size-shield]][package-size-link]

[![][codecov-shield]][codecov-link] 


[![][github-release-date-shield]][github-release-date-link]

[![][github-action-build-shield]][github-action-build-link]

[![][github-license-shield]][github-license-link]

[![][gitter-shield]][gitter-link]

[//]: # (  )

[//]: # (  )

[//]: # (  )

[//]: # (  )

[//]: # (  )

[//]: # (  )



# Watermark

> This is a *canvas-based* watermark for browser.

- 🛠️ Rich Features

- 🔑 Fully Typed APIs

- 📦️ Extremely light

Watermark works with both Vue 2 , Vue 3 And React.

# Translations

* [中文文档](README_zh.md)

## Installing

```bash

# or pnpm or yarn

npm install watermark-js-plus

```

## Usage

[Demo Collection](https://github.com/zhensherlock/watermark-js-plus/discussions/590)

### Watermark

```ts

import { Watermark } from 'watermark-js-plus'

const watermark = new Watermark({

  content: 'hello my watermark',

  width: 200,

  height: 200,

  onSuccess: () => {

    // success callback

  }

})

watermark.create()

```

### Blind Watermark

```ts

import { BlindWatermark } from 'watermark-js-plus'

const watermark = new BlindWatermark({

  content: 'hello my watermark',

  width: 200,

  height: 200,

  onSuccess: () => {

    // success callback

  }

})

watermark.create()

```

### Decode Blind Watermark

```js

import { BlindWatermark } from 'watermark-js-plus'

BlindWatermark.decode({

  url: uploadFile.url, // image url

  onSuccess: (imageBase64) => {

    // success callback

  }

})

```

## Documentation

To learn more, check [its documentation](https://zhensherlock.github.io/watermark-js-plus).

## Maintainers

[@zhensherlock](https://github.com/zhensherlock).

## Contributing

Feel free to dive in! [Open an issue](https://github.com/zhensherlock/watermark-js-plus/issues/new/choose) or submit PRs.

Standard Readme follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.

### Contributors

This project exists thanks to all the people who contribute.



  



## License

[MIT](LICENSE) © MichaelSun

[npm-release-link]: https://www.npmjs.com/package/watermark-js-plus

[npm-release-shield]: https://img.shields.io/npm/v/watermark-js-plus?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square

[npm-downloads-link]: https://www.npmjs.com/package/watermark-js-plus

[npm-downloads-shield]: https://img.shields.io/npm/dw/watermark-js-plus.svg?labelColor=black&style=flat-square&color=1677FF

[package-size-link]: https://github.com/zhensherlock/watermark-js-plus

[package-size-shield]: https://img.shields.io/bundlephobia/minzip/watermark-js-plus?color=1677FF&label=build&labelColor=black&logo=rollupdotjs&logoColor=white&style=flat-square

[codecov-link]: https://codecov.io/gh/zhensherlock/watermark-js-plus

[codecov-shield]: https://img.shields.io/codecov/c/github/zhensherlock/watermark-js-plus?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white

[github-release-date-link]: https://github.com/zhensherlock/watermark-js-plus/releases

[github-release-date-shield]: https://img.shields.io/github/release-date/zhensherlock/watermark-js-plus?color=1677FF&labelColor=black&style=flat-square

[github-action-build-link]: https://github.com/zhensherlock/watermark-js-plus/actions/workflows/deploy.yml

[github-action-build-shield]: https://img.shields.io/github/actions/workflow/status/zhensherlock/watermark-js-plus/deploy.yml?branch=main&color=1677FF&label=build&labelColor=black&logo=githubactions&logoColor=white&style=flat-square

[github-license-link]: https://github.com/zhensherlock/watermark-js-plus/blob/main/LICENSE

[github-license-shield]: https://img.shields.io/github/license/zhensherlock/watermark-js-plus?color=1677FF&labelColor=black&style=flat-square

[gitter-link]: https://gitter.im/china-hy/watermark-js-plus?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

[gitter-shield]: https://img.shields.io/gitter/room/china-hy/watermark-js-plus?color=1677FF&labelColor=black&logo=gitter&logoColor=white&style=flat-square