All Projects → hyy1115 → react-watermark-module

hyy1115 / react-watermark-module

Licence: MIT license
React水印组件,支持图片水印,文字水印。

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to react-watermark-module

WebRtcShitBlt
client side WebRTC lib to add an image / watermark on the MediaSource
Stars: ✭ 19 (-38.71%)
Mutual labels:  logo, watermark
React Native Image Marker
Add text or icon watermark to your images
Stars: ✭ 170 (+448.39%)
Mutual labels:  text, watermark
Godot-Share
Simple share text and/or image module for Godot Engine (Android & iOS)
Stars: ✭ 58 (+87.1%)
Mutual labels:  module, text
Instant-Face-Unlock
Xposed Module's InstantFaceUnlock Code
Stars: ✭ 23 (-25.81%)
Mutual labels:  module
ScsmPx
System Center Service Manager PowerShell Extensions
Stars: ✭ 30 (-3.23%)
Mutual labels:  module
create-require
Polyfill for Node.js module.createRequire (<= v12.2.0)
Stars: ✭ 24 (-22.58%)
Mutual labels:  module
hal stm32
No description or website provided.
Stars: ✭ 56 (+80.65%)
Mutual labels:  module
TextBoxes
TextBoxes: A Fast Text Detector with a Single Deep Neural Network
Stars: ✭ 625 (+1916.13%)
Mutual labels:  text
markdown
markdown tools, libraries & scripts
Stars: ✭ 52 (+67.74%)
Mutual labels:  text
textalyzer
Analyze key metrics like number of words, readability, complexity, etc. of any kind of text
Stars: ✭ 50 (+61.29%)
Mutual labels:  text
Stripe-Payment-For-Opencart-3.x
Stripe payment module for opencart 3.x
Stars: ✭ 29 (-6.45%)
Mutual labels:  module
yii2-queue-monitor
Yii2 Queue Analytics Module
Stars: ✭ 99 (+219.35%)
Mutual labels:  module
MailDemon
Smtp server for mass emailing, managing email lists and more. Built on .NET Core. Linux, MAC and Windows compatible.
Stars: ✭ 113 (+264.52%)
Mutual labels:  text
modjpeg-nginx
NGINX filter module for adding overlays and logos to JPEGs on-the-fly without degrading the quality of the image.
Stars: ✭ 18 (-41.94%)
Mutual labels:  module
react-bones
💀 Dead simple content loading components for React and React-Native. 💀
Stars: ✭ 42 (+35.48%)
Mutual labels:  text
create-node-lib
Scaffold a batteries-included Node.js library project with docs, tests, semantic releases and more
Stars: ✭ 31 (+0%)
Mutual labels:  module
ReDe
A Redis dehydrator module
Stars: ✭ 63 (+103.23%)
Mutual labels:  module
nrf24
nrf24l01 linux device driver
Stars: ✭ 20 (-35.48%)
Mutual labels:  module
jomini
Low level, performance oriented parser for save and game files from EU4, CK3, HOI4, Vic3, Imperator, and other PDS titles.
Stars: ✭ 40 (+29.03%)
Mutual labels:  text
vue-swimlane
A Text Swimlane plugin for Vue.js
Stars: ✭ 71 (+129.03%)
Mutual labels:  text

react-watermark-module

React水印组件,支持图片水印,文字水印。

安装

npm i --save react-watermark-module

用法

import ReactWatermark from 'react-watermark-module'
const imagePath = require('imagePath.png')
const logoPath = require('logoPath.jpg')

文字水印

1、支持左上、左下、右上、右下、居中等位置

2、支持任意位置

3、多行文字(暂不支持)

简易API

<ReactWatermark
    imagePath={} //必须,对象,背景图片
    textData={'红掌拨清波'} //必须,字符串,水印内容
    type={'text'} //必须,水印类型
/>

所有API

<ReactWatermark
    ID={'watermark'} //非必须,字符串,id
    color={'#f00'} //非必须,字符串,水印颜色
    font={'28px serif'} //非必须,字符串,水印字号、字体
    imagePath={} //必须,对象,背景图片
    textData={'红掌拨清波'} //必须,字符串,水印内容
    textPosition={[100, 40]} //水印位置,默认右下角,支持字符串:leftTop、leftBottom、rightTop、rightBottom、center,也支持自定义位置,用数组表示 [x, y]
    transparent={0.4} //非必须,文字透明度
    type={'text'} //必须,水印类型
/>

图片水印

1、支持左上、左下、右上、右下、居中等位置

2、支持任意位置

3、多个logo水印(暂不支持)

当type是logo时,对文字水印的字体设置无效,请不要混淆。

简易API

<ReactWatermark
    imagePath={} //必须,对象,背景图片
    logoPath={} //必须,logo水印的路径,用require或import导入
    type={'logo'} //必须,水印类型
/>

所有API

<ReactWatermark
    ID={'watermark'} //非必须,字符串,id
    imagePath={} //必须,对象,背景图片
    logoPath={} //必须,logo水印的路径,用require或import导入
    textPosition={[100, 40]} //水印位置,默认右下角,支持字符串:leftTop、leftBottom、rightTop、rightBottom、center,也支持自定义位置,用数组表示 [x, y]
    transparent={0.4} //非必须,logo透明度
    type={'logo'} //必须,水印类型
/>

疑问

插件目前只支持单文本和单logo水印,后续有多文本和多logo水印,以及更多新的功能,也欢迎你参与项目的迭代。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].