Описание

Добавление водяного знака к изображению, поддержка текстовых и графических водяных знаков, поддержка многострочных подписей.

Установка

npm install @sangtian152/watermark --save
# или
yarn add @sangtian152/watermark

Использование

import watermark from '@sangtian152/watermark';

const can = new watermark(url, options);
can.addText('текстовый водяной знак', {repeat: true, lineSpacing: 146, markSpacing: '50%' });
can.addText('центральный тестовый водяной знак', {repeat: false, fontSize: 36, position: {right: '50%', bottom: '50%'}, translate: '50%,50%'});
can.addImage(watermarkUrl, {repeat: true, markHeight: 26, lineSpacing: 146, start: 36});
can.draw(function() {
    console.log('водяные знаки успешно добавлены');
    const img = can.getBase64();
});

Параметры

Методы| Название | Описание | Параметры |

|----------|---------|-----------| | addText | Добавляет текстовый водяной знак | text, options (текущие параметры водяного знака) | | addImage | Добавляет графический водяной знак | url, options (текущие параметры водяного знака) | | draw | Рисует изображение после вызова методов addText и addImage, принимает обратный вызов | callback: Function | | getBase64| Получает base64 адрес изображения, следует использовать внутри обратного вызова метода draw | - | | getBlob | Получает объект Blob, следует использовать внутри обратного вызова метода draw | - | | getFile | Получает объект File, следует использовать внутри обратного вызова метода draw | - |### параметры| Параметр | Описание | Тип | Допустимые значения | Значение по умолчанию | |--------------|------------------|--------------|--------------------------------|-----------------------| | clip | Область добавления водяного знака, например: {type: 'rect', padding: '10%'}, type - форма, допустимые значения rect и circle, padding - отступ (по аналогии с CSS padding), принимает массив или строку, разделённую запятой, поддерживает проценты и цифры | Object | — | — | | defineClip | Самостоятельное определение области водяного знака, параметром является объект контекста canvas, поддерживаются методы работы с canvas, позволяющие создать область любого формата | Function | — | — | | fontSize | Размер шрифта для текстового водяного знака | Number | — | 26 | | fillStyle | Цвет шрифта для текстового водяного знака | String | — | #ffffff | | globalAlpha | Прозрачность водяного знака | Number | Число между 0 и 1 | 0.2 | | position | Расположение водяного знака | Object | — | {left: 10, top: 10} | | crossOrigin | Включение поддержки кросс-оригин (требуется поддержка серверной части) | Boolean | — | false | | translate | Перемещение водяного знака относительно текущего положения элемента согласно указанным параметрам | String/Array | — | 0 | | repeat | Повторение водяного знака | Boolean | — | false || rotate | Угол поворота ватермарки, действует при repeat = true | Number | — | -45 | | start | Начальная позиция ватермарки, действует при repeat = true | Number | — | 0 | | markSpacing | Интервал между двумя соседними ватермарками, действует при repeat = true | Number/String | — | 50% | | lineSpacing | Интервал между двумя последовательными строками ватермарков, действует при repeat = true | Number/String | — | 60 |

Последняя версия