watermark-js-plus
Version:
watermark for the browser
1,015 lines (994 loc) • 64.3 kB
JavaScript
/*!
* watermark-js-plus v1.5.8
* (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:0 0}75%{background-position:100% -100%}to{background-position:0 0}}";
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 */
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;
return g = { next: verb(0), "throw": verb(1), "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 };
}
}
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 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;
// @ts-ignore
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
});
Object.defineProperty(window, 'requestAnimationFrame', {
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 = document.createElement('div');
watermarkInnerDom = document.createElement('div');
this.watermarkDom.__WATERMARK__ = 'watermark';
this.watermarkDom.__WATERMARK__INSTANCE__ = this;
parentElementType = this.checkParentElementType();
this.watermarkDom.style.cssText = "\n z-index:".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n ");
backgroundSize = generateBackgroundSize(this.options);
watermarkInnerDom.style.cssText = "\n display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;back