watermark-js-plus
Version:
watermark for the browser
1,027 lines (1,005 loc) • 64.6 kB
JavaScript
/*!
* watermark-js-plus v1.6.3
* (c) 2022-2024 Michael Sun
* Released under the MIT License.
*/
'use strict';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "@keyframes watermark{0%{background-position:0 0}25%{background-position:100% 100%}50%{background-position:100% 0}75%{background-position:0 100%}to{background-position:0 0}}@keyframes watermark-horizontal{0%{background-position-x:0}to{background-position-x:100%}}@keyframes watermark-vertical{0%{background-position-y:0}to{background-position-y:100%}}";
styleInject(css_248z);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var convertImage = function (canvas) {
return canvas.toDataURL('image/png', 1);
};
var isFunction = function (value) {
return typeof value === 'function';
};
var isUndefined = function (value) {
return value === undefined;
};
var isString = function (value) {
return typeof value === 'string';
};
var createSVGElement = function (tagName, attrs, namespaceURI) {
if (attrs === void 0) { attrs = {}; }
if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
var element = document.createElementNS(namespaceURI, tagName);
for (var attr in attrs) {
element.setAttribute(attr, attrs[attr]);
}
return element;
};
var getMultiLineData = function (ctx, text, maxWidth) {
var result = [];
var str = '';
var word = '';
for (var i = 0, len = text.length; i < len; i++) {
word = text.charAt(i);
if (word === '\n') {
result.push(str);
str = '';
continue;
}
str += word;
if (ctx.measureText(str).width > maxWidth) {
result.push(str.substring(0, str.length - 1));
str = '';
i--;
}
}
result.push(str);
return result;
};
var createCustomContentSVG = function (ctx, options) { return __awaiter(void 0, void 0, void 0, function () {
var svgElement, bodyElement, rect, rectWidth, rectHeight, width, height, foreignObjectElement;
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
svgElement = createSVGElement('svg', {
xmlns: 'http://www.w3.org/2000/svg',
});
bodyElement = document.createElement('div');
bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
bodyElement.innerHTML = "<div class='rich-text-content'>".concat(options.content, "</div>");
document.body.appendChild(bodyElement);
// convert all images to base64
return [4 /*yield*/, convertImgToBase64(bodyElement)];
case 1:
// convert all images to base64
_b.sent();
rect = (_a = bodyElement.querySelector('.rich-text-content')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
rectWidth = rect === null || rect === void 0 ? void 0 : rect.width;
rectHeight = rect === null || rect === void 0 ? void 0 : rect.height;
document.body.removeChild(bodyElement);
width = options.richTextWidth || rectWidth || options.width;
height = options.richTextHeight || rectHeight || options.height;
svgElement.setAttribute('width', width.toString());
svgElement.setAttribute('height', height.toString());
foreignObjectElement = createSVGElement('foreignObject', {
width: width.toString(),
height: height.toString(),
});
foreignObjectElement.appendChild(bodyElement);
svgElement.appendChild(foreignObjectElement);
return [2 /*return*/, {
element: svgElement,
width: width,
height: height,
}];
}
});
}); };
function convertImgToBase64(bodyElement) {
return __awaiter(this, void 0, void 0, function () {
var imgElements, _loop_1, _i, _a, img;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
imgElements = bodyElement.querySelectorAll('img');
_loop_1 = function (img) {
var src, response, blob_1, imgData, error_1;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
src = img.getAttribute('src');
if (!src) return [3 /*break*/, 6];
_c.label = 1;
case 1:
_c.trys.push([1, 5, , 6]);
return [4 /*yield*/, fetch(src)];
case 2:
response = _c.sent();
return [4 /*yield*/, response.blob()];
case 3:
blob_1 = _c.sent();
return [4 /*yield*/, new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.onloadend = function () { return resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(blob_1);
})];
case 4:
imgData = _c.sent();
if (isString(imgData)) {
img.setAttribute('src', imgData);
}
return [3 /*break*/, 6];
case 5:
error_1 = _c.sent();
console.error("Error converting ".concat(src, " to base64:"), error_1);
return [3 /*break*/, 6];
case 6: return [2 /*return*/];
}
});
};
_i = 0, _a = Array.from(imgElements);
_b.label = 1;
case 1:
if (!(_i < _a.length)) return [3 /*break*/, 4];
img = _a[_i];
return [5 /*yield**/, _loop_1(img)];
case 2:
_b.sent();
_b.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4: return [2 /*return*/];
}
});
});
}
var convertSVGToImage = function (svg) {
var richContent = svg.outerHTML
.replace(/<(img|br|input|hr|embed)(.*?)>/g, '<$1$2/>')
.replace(/\n/g, '')
.replace(/\t/g, '')
.replace(/#/g, '%23');
return "data:image/svg+xml;charset=utf-8,".concat(richContent);
};
var getValue = function (v1, v2) {
if (isUndefined(v1)) {
return v2;
}
else {
return v1;
}
};
var loadImage = function (url, width, height) {
if (width === void 0) { width = undefined; }
if (height === void 0) { height = undefined; }
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
!isUndefined(width) && (image.width = width);
!isUndefined(height) && (image.height = height);
image.src = url;
return new Promise(function (resolve) {
image.onload = function () {
resolve(image);
};
});
};
var generateMatrix = function (rows, columns, value) {
return Array.from({ length: rows }, function () { return new Array(columns).fill(value); });
};
var generateAnimationStyle = function (movable, backgroundRepeat) {
if (!movable) {
return '';
}
var horizontalDuration = Math.random() * (8 - 2) + 2;
var verticalDuration = Math.random() * (4 - 2) + 2;
switch (backgroundRepeat) {
case 'repeat':
return 'animation: 200s linear 0s infinite alternate watermark !important;';
case 'repeat-x':
return "animation: ".concat(horizontalDuration, "s linear 0s infinite alternate watermark-vertical !important;'");
case 'repeat-y':
return "animation: ".concat(verticalDuration, "s linear 0s infinite alternate watermark-horizontal !important;'");
case 'no-repeat':
return "animation: ".concat(horizontalDuration, "s linear 0s infinite alternate watermark-horizontal, ").concat(verticalDuration, "s linear 0s infinite alternate watermark-vertical !important;");
default:
return '';
}
};
var initialOptions = {
width: 300,
height: 300,
rotate: 45,
layout: 'default',
auxiliaryLine: false,
translatePlacement: 'middle',
contentType: 'text',
content: 'hello watermark-js-plus',
textType: 'fill',
imageWidth: 0,
imageHeight: 0,
lineHeight: 30,
zIndex: 2147483647,
backgroundPosition: '0 0',
backgroundRepeat: 'repeat',
fontSize: '20px',
fontFamily: 'sans-serif',
fontStyle: '',
fontVariant: '',
fontColor: '#000',
fontWeight: 'normal',
filter: 'none',
letterSpacing: '0px',
wordSpacing: '0px',
globalAlpha: 0.5,
mode: 'default',
mutationObserve: true,
monitorProtection: false,
movable: false,
parent: 'body',
onSuccess: function () { },
onBeforeDestroy: function () { },
onDestroyed: function () { },
onObserveError: function () { },
};
var generateRecommendOptions = function (canvas, options, args) {
var ctx = canvas.getContext('2d');
if (ctx === null) {
throw new Error('get context error');
}
ctx.font = "".concat(options.fontStyle, " ").concat(options.fontVariant, " ").concat(options.fontWeight, " ").concat(options.fontSize, " ").concat(options.fontFamily);
ctx.filter = options.filter;
ctx.letterSpacing = options.letterSpacing;
ctx.wordSpacing = options.wordSpacing;
if (options === null || options === void 0 ? void 0 : options.rotate) {
options.rotate = (360 - (options.rotate % 360)) * (Math.PI / 180);
}
if (isUndefined(args.textRowMaxWidth)) {
options.textRowMaxWidth = options.width;
}
var result = {
image: {
rect: {
width: options.imageWidth,
height: options.imageHeight,
},
position: {
x: 0,
y: 0,
},
},
textLine: {
data: [],
yOffsetValue: 0,
},
advancedStyleParams: {
linear: {
x0: 0,
x1: 0,
},
radial: {
x0: 0,
y0: 0,
r0: 0,
x1: 0,
y1: 0,
r1: 0,
},
conic: {
x: 0,
y: 0,
startAngle: 0,
},
pattern: {},
},
};
switch (options.contentType) {
case 'text':
result.textLine.data = [options.content];
break;
case 'multi-line-text':
result.textLine.data = getMultiLineData(ctx, options.content, options.textRowMaxWidth);
break;
// case 'image':
// break
// case 'rich-text':
// break
}
var translateX = options.width / 2;
var translateY = options.height / 2;
var textBaseline = 'middle';
var textAlign = 'center';
if (!isUndefined(args === null || args === void 0 ? void 0 : args.translateX) && !isUndefined(args === null || args === void 0 ? void 0 : args.translateY)) {
translateX = args === null || args === void 0 ? void 0 : args.translateX;
translateY = args === null || args === void 0 ? void 0 : args.translateY;
textBaseline = 'top';
textAlign = 'left';
}
else {
// default middle
// translateX = options.width / 2
// translateY = options.height / 2
// TextBaselineType = 'middle'
// textAlign = 'center'
result.advancedStyleParams.linear.x0 = -options.width / 2;
result.advancedStyleParams.linear.x1 = options.width / 2;
// result.advancedStyleParams.radial.x0 = 0
// result.advancedStyleParams.radial.y0 = 0
result.advancedStyleParams.radial.r0 = 0;
// result.advancedStyleParams.radial.x1 = 0
// result.advancedStyleParams.radial.y1 = 0
result.advancedStyleParams.radial.r1 = options.width / 2;
// result.advancedStyleParams.conic.x = 0
// result.advancedStyleParams.conic.y = 0
}
switch (args.translatePlacement) {
case 'top':
translateX = options.width / 2;
translateY = 0;
textBaseline = 'top';
// textAlign = 'center'
result.advancedStyleParams.linear.x0 = -options.width / 2;
result.advancedStyleParams.linear.x1 = options.width / 2;
// result.advancedStyleParams.radial.x0 = 0
result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
// result.advancedStyleParams.radial.x1 = 0
// result.advancedStyleParams.radial.y1 = 0
result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
// result.advancedStyleParams.conic.x = 0
result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
break;
case 'top-start':
translateX = 0;
translateY = 0;
textBaseline = 'top';
textAlign = 'start';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = options.width;
result.advancedStyleParams.radial.x0 = options.width / 2;
result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = options.width / 2;
result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = options.width / 2;
result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
break;
case 'top-end':
translateX = options.width;
translateY = 0;
textBaseline = 'top';
textAlign = 'end';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = -options.width;
result.advancedStyleParams.radial.x0 = -options.width / 2;
result.advancedStyleParams.radial.y0 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = -options.width / 2;
result.advancedStyleParams.radial.y1 = (result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = -options.width / 2;
result.advancedStyleParams.conic.y = (result.textLine.data.length * options.lineHeight) / 2;
break;
case 'bottom':
translateX = options.width / 2;
translateY = options.height;
textBaseline = 'bottom';
// textAlign = 'center'
result.advancedStyleParams.linear.x0 = -options.width / 2;
result.advancedStyleParams.linear.x1 = options.width / 2;
// result.advancedStyleParams.radial.x0 = 0
result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
// result.advancedStyleParams.radial.x1 = 0
result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = 0;
result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
break;
case 'bottom-start':
translateX = 0;
translateY = options.height;
textBaseline = 'bottom';
textAlign = 'start';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = options.width;
result.advancedStyleParams.radial.x0 = options.width / 2;
result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = options.width / 2;
result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = options.width / 2;
result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
break;
case 'bottom-end':
translateX = options.width;
translateY = options.height;
textBaseline = 'bottom';
textAlign = 'end';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = -options.width;
result.advancedStyleParams.radial.x0 = -options.width / 2;
result.advancedStyleParams.radial.y0 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = -options.width / 2;
result.advancedStyleParams.radial.y1 = (-result.textLine.data.length * options.lineHeight) / 2;
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = -options.width / 2;
result.advancedStyleParams.conic.y = (-result.textLine.data.length * options.lineHeight) / 2;
break;
case 'left':
translateX = 0;
translateY = options.height / 2;
// TextBaselineType = 'middle'
textAlign = 'start';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = options.width;
result.advancedStyleParams.radial.x0 = options.width / 2;
// result.advancedStyleParams.radial.y0 = 0
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = options.width / 2;
// result.advancedStyleParams.radial.y1 = 0
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = options.width / 2;
result.advancedStyleParams.conic.y = 0;
break;
case 'right':
translateX = options.width;
translateY = options.height / 2;
// TextBaselineType = 'middle'
textAlign = 'end';
result.advancedStyleParams.linear.x0 = 0;
result.advancedStyleParams.linear.x1 = -options.width;
result.advancedStyleParams.radial.x0 = -options.width / 2;
// result.advancedStyleParams.radial.y0 = 0
// result.advancedStyleParams.radial.r0 = 0
result.advancedStyleParams.radial.x1 = -options.width / 2;
// result.advancedStyleParams.radial.y1 = 0
// result.advancedStyleParams.radial.r1 = options.width / 2
result.advancedStyleParams.conic.x = -options.width / 2;
result.advancedStyleParams.conic.y = 0;
break;
}
options.translateX = translateX;
options.translateY = translateY;
isUndefined(args === null || args === void 0 ? void 0 : args.textBaseline) && (options.textBaseline = textBaseline);
isUndefined(args === null || args === void 0 ? void 0 : args.textAlign) && (options.textAlign = textAlign);
if (['text', 'multi-line-text'].includes(options.contentType)) {
switch (options.textBaseline) {
case 'middle':
result.textLine.yOffsetValue = ((result.textLine.data.length - 1) * options.lineHeight) / 2;
break;
case 'bottom':
case 'alphabetic':
case 'ideographic':
result.textLine.yOffsetValue =
(result.textLine.data.length - 1) * options.lineHeight + (options.lineHeight - parseInt(options.fontSize)) / 2;
break;
case 'top':
case 'hanging':
result.textLine.yOffsetValue = -options.lineHeight / 2 + parseInt(options.fontSize) / 2;
break;
}
}
return result;
};
var protection = (function (need) {
if (typeof window === 'undefined') {
return;
}
if (need) {
Object.defineProperty(window, 'MutationObserver', {
writable: false,
configurable: false,
});
}
});
var WatermarkCanvas = /** @class */ (function () {
function WatermarkCanvas(args, options) {
this.props = args;
this.options = options;
this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
}
/**
* Create an HD canvas.
* @param width - width of canvas
* @param height - height of canvas
*/
WatermarkCanvas.createCanvas = function (width, height) {
var _a;
var ratio = window.devicePixelRatio || 1;
var canvas = document.createElement('canvas');
canvas.width = width * ratio; // actual rendered pixel
canvas.height = height * ratio; // actual rendered pixel
canvas.style.width = "".concat(width, "px"); // control display size
canvas.style.height = "".concat(height, "px"); // control display size
(_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
return canvas;
};
/**
* Clean the canvas
* @param canvas
*/
WatermarkCanvas.clearCanvas = function (canvas) {
var ctx = canvas.getContext('2d');
if (ctx === null) {
throw new Error('get context error');
}
ctx.restore();
ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);
var ratio = window.devicePixelRatio || 1;
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
};
WatermarkCanvas.prototype.getCanvas = function () {
return this.canvas;
};
WatermarkCanvas.prototype.clear = function () {
WatermarkCanvas.clearCanvas(this.canvas);
};
WatermarkCanvas.prototype.draw = function () {
var _this = this;
var ctx = this.canvas.getContext('2d');
if (ctx === null) {
throw new Error('get context error');
}
if (this.options.auxiliaryLine) {
ctx.beginPath();
ctx.rect(0, 0, this.options.width, this.options.height);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.rect(this.options.translateX, this.options.translateY, 1, 1);
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.closePath();
}
this.setStyle(ctx);
ctx.save();
ctx.translate(this.options.translateX, this.options.translateY);
ctx.rotate(this.options.rotate);
return new Promise(function (resolve) {
switch (_this.options.contentType) {
case 'text':
_this.drawText(ctx, resolve);
break;
case 'image':
_this.drawImage(ctx, resolve);
break;
case 'multi-line-text':
_this.drawMultiLineText(ctx, resolve);
break;
case 'rich-text':
_this.drawRichText(ctx, resolve);
break;
}
});
};
WatermarkCanvas.prototype.setStyle = function (ctx) {
var _a;
var propName = 'fillStyle';
if (this.options.textType === 'stroke') {
propName = 'strokeStyle';
}
var style = this.options.fontColor;
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) {
switch (this.options.advancedStyle.type) {
case 'linear':
style = this.createLinearGradient(ctx);
break;
case 'radial':
style = this.createRadialGradient(ctx);
break;
case 'conic':
style = this.createConicGradient(ctx);
break;
case 'pattern':
style = this.createPattern(ctx);
break;
}
}
ctx[propName] && style && (ctx[propName] = style);
this.options.textAlign && (ctx.textAlign = this.options.textAlign);
this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
ctx.globalAlpha = this.options.globalAlpha;
if (this.options.shadowStyle) {
ctx.shadowBlur = getValue(this.options.shadowStyle.shadowBlur, 0);
ctx.shadowColor = getValue(this.options.shadowStyle.shadowColor, '#00000000');
ctx.shadowOffsetX = getValue(this.options.shadowStyle.shadowOffsetX, 0);
ctx.shadowOffsetY = getValue(this.options.shadowStyle.shadowOffsetY, 0);
}
if (isFunction(this.options.extraDrawFunc)) {
this.options.extraDrawFunc(ctx);
}
};
WatermarkCanvas.prototype.createLinearGradient = function (ctx) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
var gradient = ctx.createLinearGradient((getValue((_c = (_b = (_a = this.options.advancedStyle) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.linear) === null || _c === void 0 ? void 0 : _c.x0, this.recommendOptions.advancedStyleParams.linear.x0)), getValue((_f = (_e = (_d = this.options.advancedStyle) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.linear) === null || _f === void 0 ? void 0 : _f.y0, 0), (getValue((_j = (_h = (_g = this.options.advancedStyle) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.linear) === null || _j === void 0 ? void 0 : _j.x1, this.recommendOptions.advancedStyleParams.linear.x1)), getValue((_m = (_l = (_k = this.options.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.linear) === null || _m === void 0 ? void 0 : _m.y1, 0));
(_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
gradient.addColorStop(item.offset, item.color);
});
return gradient;
};
WatermarkCanvas.prototype.createConicGradient = function (ctx) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
var gradient = ctx.createConicGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.conic) === null || _d === void 0 ? void 0 : _d.startAngle, 0), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.conic) === null || _h === void 0 ? void 0 : _h.x, this.recommendOptions.advancedStyleParams.conic.x)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.conic) === null || _m === void 0 ? void 0 : _m.y, this.recommendOptions.advancedStyleParams.conic.y)));
(_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
gradient.addColorStop(item.offset, item.color);
});
return gradient;
};
WatermarkCanvas.prototype.createRadialGradient = function (ctx) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
var gradient = ctx.createRadialGradient((getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.radial) === null || _d === void 0 ? void 0 : _d.x0, this.recommendOptions.advancedStyleParams.radial.x0)), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.radial) === null || _h === void 0 ? void 0 : _h.y0, this.recommendOptions.advancedStyleParams.radial.y0)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.radial) === null || _m === void 0 ? void 0 : _m.r0, this.recommendOptions.advancedStyleParams.radial.r0)), (getValue((_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.radial) === null || _r === void 0 ? void 0 : _r.x1, this.recommendOptions.advancedStyleParams.radial.x1)), (getValue((_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.advancedStyle) === null || _t === void 0 ? void 0 : _t.params) === null || _u === void 0 ? void 0 : _u.radial) === null || _v === void 0 ? void 0 : _v.y1, this.recommendOptions.advancedStyleParams.radial.y1)), (getValue((_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.advancedStyle) === null || _x === void 0 ? void 0 : _x.params) === null || _y === void 0 ? void 0 : _y.radial) === null || _z === void 0 ? void 0 : _z.r1, this.recommendOptions.advancedStyleParams.radial.r1)));
(_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.advancedStyle) === null || _1 === void 0 ? void 0 : _1.colorStops) === null || _2 === void 0 ? void 0 : _2.forEach(function (item) {
gradient.addColorStop(item.offset, item.color);
});
return gradient;
};
WatermarkCanvas.prototype.createPattern = function (ctx) {
var _a, _b, _c, _d, _e, _f, _g, _h;
return ctx.createPattern(((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.pattern) === null || _d === void 0 ? void 0 : _d.image), ((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.pattern) === null || _h === void 0 ? void 0 : _h.repetition) || '');
};
WatermarkCanvas.prototype.setText = function (ctx, params) {
var methodName = 'fillText';
if (this.options.textType === 'stroke') {
methodName = 'strokeText';
}
ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
};
WatermarkCanvas.prototype.drawText = function (ctx, resolve) {
this.setText(ctx, {
text: this.options.content,
x: 0,
y: 0 - this.recommendOptions.textLine.yOffsetValue,
maxWidth: this.options.textRowMaxWidth || this.options.width,
});
resolve(ctx.canvas);
};
WatermarkCanvas.prototype.drawImage = function (ctx, resolve) {
var _this = this;
loadImage(this.options.image).then(function (image) {
var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
resolve(ctx.canvas);
});
};
WatermarkCanvas.prototype.drawMultiLineText = function (ctx, resolve) {
var _this = this;
// image.width = this.options.width
// image.height = this.options.height
// const element = createCustomContentSvg(context, this.options)
// image.src = convertSVGToImage(element)
// image.onload = () => {
// context.translate(this.options.width / 2, this.options.height / 2)
// context.rotate(this.options.rotate)
// context.drawImage(
// image,
// -this.options.width / 2,
// -this.options.height / 2,
// context.canvas.width,
// context.canvas.height
// )
// resolve(canvas)
// }
var lines = this.recommendOptions.textLine.data;
var yOffsetValue = this.recommendOptions.textLine.yOffsetValue;
lines.forEach(function (text, index) {
_this.setText(ctx, {
text: text,
x: 0,
y: _this.options.lineHeight * index - yOffsetValue,
maxWidth: _this.options.textRowMaxWidth || _this.options.width,
});
});
resolve(ctx.canvas);
};
WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
return __awaiter(this, void 0, void 0, function () {
var obj;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, createCustomContentSVG(ctx, this.options)];
case 1:
obj = _a.sent();
loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
var imagePosition = _this.getDrawImagePosition(image.width, image.height);
ctx.drawImage(image, imagePosition.x, imagePosition.y, image.width, image.height);
resolve(ctx.canvas);
});
return [2 /*return*/];
}
});
});
};
WatermarkCanvas.prototype.getImageRect = function (image) {
var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
switch (true) {
case rect.width !== 0 && rect.height === 0:
rect.height = (rect.width * image.height) / image.width;
break;
case rect.width === 0 && rect.height !== 0:
rect.width = (rect.height * image.width) / image.height;
break;
case rect.width === 0 && rect.height === 0:
rect.width = image.width;
rect.height = image.height;
break;
}
return rect;
};
WatermarkCanvas.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
var _a, _b;
var result = {
x: -imageWidth / 2,
y: -imageHeight / 2,
};
switch (this.options.translatePlacement) {
case 'top':
result.x = -imageWidth / 2;
result.y = 0;
break;
case 'top-start':
result.x = 0;
result.y = 0;
break;
case 'top-end':
result.x = -imageWidth;
result.y = 0;
break;
case 'bottom':
result.x = -imageWidth / 2;
result.y = -imageHeight;
break;
case 'bottom-start':
result.x = 0;
result.y = -imageHeight;
break;
case 'bottom-end':
result.x = -imageWidth;
result.y = -imageHeight;
break;
case 'left':
result.x = 0;
result.y = -imageHeight / 2;
break;
case 'right':
result.x = -imageWidth;
result.y = -imageHeight / 2;
break;
}
!isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
return result;
};
return WatermarkCanvas;
}());
var GridLayout = /** @class */ (function () {
function GridLayout(args, partialCanvas) {
var _a, _b, _c, _d;
this.options = args;
this.partialWidth = this.options.width;
this.partialHeight = this.options.height;
this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
this.partialCanvas = partialCanvas;
}
GridLayout.prototype.draw = function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
var layoutCanvas = WatermarkCanvas.createCanvas(((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.width) || this.partialWidth * this.cols + this.gap[0] * this.cols, ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.height) || this.partialHeight * this.rows + this.gap[1] * this.rows);
var layoutContext = layoutCanvas.getContext('2d');
if ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.backgroundImage, 0, 0, (_e = this.options.gridLayoutOptions) === null || _e === void 0 ? void 0 : _e.width, (_f = this.options.gridLayoutOptions) === null || _f === void 0 ? void 0 : _f.height);
}
for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
for (var colIndex = 0; colIndex < this.cols; colIndex++) {
if (!((_h = (_g = this.matrix) === null || _g === void 0 ? void 0 : _g[rowIndex]) === null || _h === void 0 ? void 0 : _h[colIndex])) {
continue;
}
layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
}
}
return layoutCanvas;
};
return GridLayout;
}());
var renderLayout = function (options, partialCanvas) {
switch (options.layout) {
case 'grid':
return new GridLayout(options, partialCanvas).draw();
default:
return partialCanvas;
}
};
var generateBackgroundSize = function (options) {
var _a, _b, _c;
switch (options.layout) {
case 'grid': {
var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
return [options.width * cols + gap[0] * cols, options.height * rows + gap[1] * rows];
}
default:
return [options.width, options.height];
}
};
/**
* Watermark class
*/
var Watermark = /** @class */ (function () {
/**
* Watermark constructor
* @param args - watermark args
*/
function Watermark(args) {
if (args === void 0) { args = {}; }
this.parentElement = document.body;
this.isCreating = false;
this.props = args;
this.options = __assign(__assign({}, initialOptions), args);
this.changeParentElement(this.options.parent);
this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
protection(this.options.monitorProtection);
}
/**
* Change watermark options
* @param args
* @param mode
* @param redraw
*/
Watermark.prototype.changeOptions = function () {
return __awaiter(this, arguments, void 0, function (args, mode, redraw) {
if (args === void 0) { args = {}; }
if (mode === void 0) { mode = 'overwrite'; }
if (redraw === void 0) { redraw = true; }
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.initConfigData(args, mode);
protection(this.options.monitorProtection);
if (!redraw) return [3 /*break*/, 2];
this.remove();
return [4 /*yield*/, this.create()];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
/**
* Creating a watermark.
*/
Watermark.prototype.create = function () {
return __awaiter(this, void 0, void 0, function () {
var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
var _a, _b, _c, _d, _e, _f, _g;
return __generator(this, function (_h) {
switch (_h.label) {
case 0:
if (this.isCreating) {
return [2 /*return*/];
}
this.isCreating = true;
if (!this.validateUnique()) {
this.isCreating = false;
return [2 /*return*/];
}
if (!this.validateContent()) {
this.isCreating = false;
return [2 /*return*/];
}
firstDraw = isUndefined(this.watermarkDom);
return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
case 1:
_h.sent();
this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
image = convertImage(this.layoutCanvas);
(_c = this.watermarkCanvas) === null || _c === void 0 ? void 0 : _c.clear();
this.watermarkDom = documen