@uiw/watermark.js
v1.0.1TypeScript
JavaScript library for generating image watermarks using canvas.
0/weekUpdated 2 years agoMITUnpacked: 57.6 KB
Published by kenny wang
npm install @uiw/watermark.jsWatermark.js
===
JavaScript library for generating image watermarks using canvas. support react.
Install
``bash`
npm i @uiw/watermark.jsOr
npm i @uiw/react-watermark
Using
`js
import Watermark from '@uiw/watermark.js';
const watermark = new Watermark({
content: 'Hello Watermark!'
});
watermark.create().then((mark) => {
console.log('output:', mark)
})
.catch((err) => {
console.log(err, 'err')
})
`
Or manually download and link watermark.js in your HTML, It can also be downloaded via UNPKG:
CDN: UNPKG | jsDelivr | Githack | Statically
`html`
Used in React
`jsx
import React from "react";
import Watermark from '@uiw/react-watermark';
const style = { width: '100%', maxWidth: '100%', height: 200, display: 'block' };
const text = React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.;
export default function App() {
return (
style={{ background: '#fff' }}
>
);
}
`
API
`ts°
export interface WatermarkOptions {
/* watermark text content /
content?: string | string[];
/**
* When the watermark is drawn, the rotation angle, in . @default -22
*/
rotate?: number;
/**
* High-definition print image source, for high-definition screen display,
* it is recommended to use 2x or 3x image, and priority to use image rendering watermark.
*/
image?: string;
/* Horizontal spacing between watermarks. @default /222
gapX?: number;
/* vertical spacing between watermarks. @default /120
gapY?: number;
/* width of watermark. @default /64
width?: number;
/* height of watermark @default /offsetTop = gapY / 2
height?: number;
/**
* The vertical offset of the watermark drawn on the canvas.
* Normally, the watermark is drawn in the middle position, ie
*/
offsetLeft?: number;
/**
* The horizontal offset of the watermark drawn on the canvas, under normal circumstances,
* the watermark is drawn in the middle position, ie
*/
offsetTop?: number;
/* text size @default /sans-serif
fontSize?: number;
/* text family @default /normal
fontFamily?: string;
/* text weight @default /rgba(0,0,0,.15)
fontWeight?: 'normal' | 'light' | 'weight' | number;
/* text color @default /``
fontColor?: string;
/* text style /
fontStyle?: CanvasFillStrokeStyles['fillStyle'];
}
export default class Watermark {
option: WatermarkOptions;
constructor(options: WatermarkOptions);
create(): Promise
}
Contributors
As always, thanks to our amazing contributors!
Made with action-contributors.
License
Licensed under the MIT License.