# watermark-on-image

> A general image watermark library for web

Latest version **1.0.2** (published 2022-11-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install watermark-on-image
pnpm add watermark-on-image
yarn add watermark-on-image
bun add watermark-on-image
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-11-16 |
| First published | 2022-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 125 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Pureblackkk |
| Maintainers | pureblackkkk |
| Keywords | canvas, watermark, image, text |

## Links

- npm: https://www.npmjs.com/package/watermark-on-image
- Repository: https://github.com/Pureblackkk/watermark-on-image
- Homepage: https://github.com/Pureblackkk/watermark-on-image#readme
- Issues: https://github.com/Pureblackkk/watermark-on-image/issues
- npm.io page: https://npm.io/package/watermark-on-image

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-11-16
- 1.0.1 — 2022-11-13

## README

# watermark-on-image
This is a general image watermark library for web browser, which supports marking both texts and images repeatedly covering the image in the form of a chaining calling.


# Installing
```bash
npm install watermark-on-image
```

# Usage
Using the chaining calling to load source images, mark images or texts, and other related options. It supports receiving url paths and Image objects.
```js
// Mark Image
new WaterMarkkk()
.loadSrc('src/1.png')
.markImage('mark/1.png')
.markSpacing(600, 200)
.getImage('png', 1.0, { width: 1500, height: 800 })
.then(imgs => {
    const imgElement = document.createElement('img');
    imgElement.src = imgs[0];
    document.getElementById('root').appendChild(imgElement);
});

// Mark Texts
new WaterMarkkk()
.loadSrc(['src/1.png', 'src/2.png'])
.markText(['mark1', 'mark2'])
.markSpacing(100, 100)
.markOpicity(0.6)
.markRotation('40deg')
.getImage('jpeg', 1.0)
.then(imgs => {
    imgs.forEach(img => {
        const imgElement = document.createElement('img');
        imgElement.src = img;
        document.getElementById('root').appendChild(imgElement);
    })
});
```

### Method
+ **loadSrc**

    Recieve single path, Image object or the array of them. Each image in the array will be processed by the same configuration.
    ```typescript
    loadSrc(src: string | HTMLImageElement | (string | HTMLImageElement)[])
    ```

+ **markImage**
    
    Same with loadSrc method
    ```typescript
    markImage(mark: string | HTMLImageElement | (string | HTMLImageElement)[])
    ```

+ **markText**
    
    Recieve a single string or the array of strings to mark. All the texts will be ordered repeatedly to cover the whole image. You can also set related options for texts.
    ```typescript
    markText(mark: string | string[], textOptions?: {
        color?: string,
        font?: string
    })    
    ```
    Default: 
    + mark: 'WaterMarkkk'
    + color: 'black'
    + font: 'bold 24px serif'
+ **markRotation**

    Set for the rotation angle (0 degree - 180 degree) of mark. Recieve number (ie. Math.PI) or string (ie. "30 deg"). Here the number must be in the unit degree (Math.PI).
    ```typescript
    markRotation: (rotation: number | string);
    ```
    Default: 0
+ **markOpicity**

    Set the mark opicity (0 - 1).
    ```typescript
    markOpicity: (opicity: number)
    ```
    Default: 1.0

+ **markSpacing**

    Set markers' vertical and horizontal spacing distance (in the unit of px). Recieve string (ie. "30 px") or number (ie. 30).

    ```typescript
    markSpacing: (vertical: string | number, horizontal: string | number);
    ```
    Default: 
    + vertical: 20
    + horizontal: 20


+ **getImage**

    Must be called to get marked img result. It will return a list of img based on the format you choose. It provides four options: 'jpeg', 'png', 'webp' and 'canvas'. Here 'canvas' refers to the HTMLCanvasElement. Except for canvas, all the other forms of image will be returned as URI string. It also provides quality (0 - 1) and size options.

    ```typescript
    getImage: (type?: ExportType, quality?: number, size?: {
        width?: number;
        height?: number;
    }) => Promise<string[] | HTMLCanvasElement[]>;
    ```
    Default: 
    + type: png
    + quality: 1.0
    + size: undefined (which means keeping the same with the original image)

# Start & Building
Generate a template with html page into dist folder based on the file from test/example. You can test functionalities by this.

```
npm run start
```

Build for publish
```
npm run build
```

# Test
Use jest to test some basic utility functions. You can find them in the test folder.
```
npm run test
```

# Suggestions
Please feel free to make suggestions and contributions.

---
_Source: https://npm.io/package/watermark-on-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._