1334 lines
66 KiB
JavaScript
1334 lines
66 KiB
JavaScript
/*!
|
|
* watermark-js-plus v1.6.3
|
|
* (c) 2022-2024 Michael Sun
|
|
* Released under the MIT License.
|
|
*/
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WatermarkPlus = {}));
|
|
})(this, (function (exports) { '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 = 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;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n ").concat(generateAnimationStyle(this.options.movable, this.options.backgroundRepeat), "\n ");
|
|
this.watermarkDom.appendChild(watermarkInnerDom);
|
|
this.parentElement.appendChild(this.watermarkDom);
|
|
if (this.options.mutationObserve) {
|
|
try {
|
|
this.bindMutationObserve();
|
|
}
|
|
catch (_j) {
|
|
(_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
|
|
}
|
|
}
|
|
firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
|
|
this.isCreating = false;
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
/**
|
|
* Delete this watermark.
|
|
*/
|
|
Watermark.prototype.destroy = function () {
|
|
this.remove();
|
|
this.watermarkDom = undefined;
|
|
};
|
|
Watermark.prototype.check = function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
return __generator(this, function (_a) {
|
|
return [2 /*return*/, this.parentElement.contains(this.watermarkDom)];
|
|
});
|
|
});
|
|
};
|
|
Watermark.prototype.remove = function () {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
(_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
(_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
|
|
(_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
|
|
(_f = (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.parentNode) === null || _f === void 0 ? void 0 : _f.removeChild(this.watermarkDom);
|
|
(_h = (_g = this.options).onDestroyed) === null || _h === void 0 ? void 0 : _h.call(_g);
|
|
};
|
|
Watermark.prototype.initConfigData = function (args, mode) {
|
|
var _this = this;
|
|
if (mode === void 0) { mode = 'overwrite'; }
|
|
if (mode === 'append') {
|
|
Object.keys(args).forEach(function (key) {
|
|
_this.props && (_this.props[key] = args[key]);
|
|
});
|
|
}
|
|
else {
|
|
this.props = args;
|
|
}
|
|
this.options = __assign(__assign({}, initialOptions), this.props);
|
|
this.changeParentElement(this.options.parent);
|
|
this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
|
|
};
|
|
Watermark.prototype.changeParentElement = function (parent) {
|
|
if (typeof parent === 'string') {
|
|
var parentElement = document.querySelector(parent);
|
|
parentElement && (this.parentElement = parentElement);
|
|
}
|
|
else {
|
|
this.parentElement = parent;
|
|
}
|
|
if (!this.parentElement) {
|
|
console.error('[WatermarkJsPlus]: please pass a valid parent element.');
|
|
}
|
|
};
|
|
Watermark.prototype.validateUnique = function () {
|
|
var result = true;
|
|
Array.from(this.parentElement.childNodes).forEach(function (node) {
|
|
if (!result) {
|
|
return;
|
|
}
|
|
if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
|
|
result = false;
|
|
// throw new Error('duplicate watermark error')
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
Watermark.prototype.validateContent = function () {
|
|
switch (this.options.contentType) {
|
|
case 'image':
|
|
return Object.hasOwnProperty.call(this.options, 'image');
|
|
case 'multi-line-text':
|
|
case 'rich-text':
|
|
case 'text':
|
|
return this.options.content.length > 0;
|
|
}
|
|
};
|
|
Watermark.prototype.checkParentElementType = function () {
|
|
if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
|
|
return 'root';
|
|
}
|
|
return 'custom';
|
|
};
|
|
Watermark.prototype.bindMutationObserve = function () {
|
|
var _this = this;
|
|
if (!this.watermarkDom) {
|
|
return;
|
|
}
|
|
this.observer = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
if (!(mutationsList.length > 0)) return [3 /*break*/, 2];
|
|
this.remove();
|
|
return [4 /*yield*/, this.create()];
|
|
case 1:
|
|
_a.sent();
|
|
_a.label = 2;
|
|
case 2: return [2 /*return*/];
|
|
}
|
|
});
|
|
}); });
|
|
this.observer.observe(this.watermarkDom, {
|
|
attributes: true, // 属性的变动
|
|
childList: true, // 子节点的变动（指新增，删除或者更改）
|
|
subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
|
|
characterData: true, // 节点内容或节点文本的变动。
|
|
});
|
|
this.parentObserve = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
|
|
var _i, mutationsList_1, item;
|
|
var _a;
|
|
return __generator(this, function (_b) {
|
|
switch (_b.label) {
|
|
case 0:
|
|
_i = 0, mutationsList_1 = mutationsList;
|
|
_b.label = 1;
|
|
case 1:
|
|
if (!(_i < mutationsList_1.length)) return [3 /*break*/, 4];
|
|
item = mutationsList_1[_i];
|
|
if (!((item === null || item === void 0 ? void 0 : item.target) === this.watermarkDom ||
|
|
((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === this.watermarkDom ||
|
|
(item.type === 'childList' &&
|
|
item.target === this.parentElement &&
|
|
item.target.lastChild !== this.watermarkDom))) return [3 /*break*/, 3];
|
|
this.remove();
|
|
return [4 /*yield*/, this.create()];
|
|
case 2:
|
|
_b.sent();
|
|
_b.label = 3;
|
|
case 3:
|
|
_i++;
|
|
return [3 /*break*/, 1];
|
|
case 4: return [2 /*return*/];
|
|
}
|
|
});
|
|
}); });
|
|
this.parentObserve.observe(this.parentElement, {
|
|
attributes: true, // 属性的变动
|
|
childList: true, // 子节点的变动（指新增，删除或者更改）
|
|
subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
|
|
characterData: true, // 节点内容或节点文本的变动。
|
|
});
|
|
};
|
|
return Watermark;
|
|
}());
|
|
|
|
/**
|
|
* BlindWatermark class
|
|
*/
|
|
var BlindWatermark = /** @class */ (function (_super) {
|
|
__extends(BlindWatermark, _super);
|
|
/**
|
|
* BlindWatermark constructor
|
|
* @param props - blind watermark options
|
|
*/
|
|
function BlindWatermark(props) {
|
|
if (props === void 0) { props = {}; }
|
|
var defaultProps = {
|
|
globalAlpha: 0.005,
|
|
mode: 'blind',
|
|
};
|
|
return _super.call(this, __assign(__assign({}, props), defaultProps)) || this;
|
|
}
|
|
BlindWatermark.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:
|
|
args.globalAlpha = 0.005;
|
|
args.mode = 'blind';
|
|
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*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
/**
|
|
* Decode blind watermark.
|
|
* @param props - decode options
|
|
*/
|
|
BlindWatermark.decode = function (props) {
|
|
var _a = props.url, url = _a === void 0 ? '' : _a, _b = props.fillColor, fillColor = _b === void 0 ? '#000' : _b, _c = props.compositeOperation, compositeOperation = _c === void 0 ? 'color-burn' : _c, _d = props.mode, mode = _d === void 0 ? 'canvas' : _d, _e = props.compositeTimes, compositeTimes = _e === void 0 ? 3 : _e, onSuccess = props.onSuccess;
|
|
if (!url) {
|
|
return;
|
|
}
|
|
if (mode === 'canvas') {
|
|
var img_1 = new Image();
|
|
img_1.src = url;
|
|
img_1.addEventListener('load', function () {
|
|
var width = img_1.width, height = img_1.height;
|
|
var canvas = WatermarkCanvas.createCanvas(width, height);
|
|
var ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
throw new Error('get context error');
|
|
}
|
|
ctx.drawImage(img_1, 0, 0, width, height);
|
|
ctx.globalCompositeOperation = compositeOperation;
|
|
ctx.fillStyle = fillColor;
|
|
for (var i = 0; i < compositeTimes; i++) {
|
|
ctx.fillRect(0, 0, width, height);
|
|
}
|
|
var resultImage = convertImage(canvas);
|
|
if (isFunction(onSuccess)) {
|
|
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(resultImage);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
return BlindWatermark;
|
|
}(Watermark));
|
|
|
|
/**
|
|
* ImageWatermark class
|
|
*/
|
|
var ImageWatermark = /** @class */ (function () {
|
|
/**
|
|
* ImageWatermark constructor
|
|
* @param args - image watermark args
|
|
*/
|
|
function ImageWatermark(args) {
|
|
if (args === void 0) { args = {}; }
|
|
var _a, _b;
|
|
this.drew = false;
|
|
this.props = args;
|
|
this.options = __assign(__assign({}, initialOptions), args);
|
|
if (this.props.crossOrigin) {
|
|
(_a = this.props.dom) === null || _a === void 0 ? void 0 : _a.setAttribute('crossOrigin', 'anonymous');
|
|
}
|
|
this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
|
|
this.originalSrc = (_b = this.props.dom) === null || _b === void 0 ? void 0 : _b.src;
|
|
this.backgroundImage = this.getBackgroundImage();
|
|
}
|
|
ImageWatermark.prototype.create = function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _a, _b, _c, _d, _e;
|
|
return __generator(this, function (_f) {
|
|
switch (_f.label) {
|
|
case 0:
|
|
if (this.drew) {
|
|
return [2 /*return*/];
|
|
}
|
|
return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
|
|
case 1:
|
|
_f.sent();
|
|
this.options.layout = 'grid';
|
|
this.options.gridLayoutOptions = __assign(__assign({}, this.options.gridLayoutOptions), { width: (_b = this.backgroundImage) === null || _b === void 0 ? void 0 : _b.width, height: (_c = this.backgroundImage) === null || _c === void 0 ? void 0 : _c.height, backgroundImage: this.backgroundImage });
|
|
this.layoutCanvas = renderLayout(this.options, (_d = this.watermarkCanvas) === null || _d === void 0 ? void 0 : _d.getCanvas());
|
|
this.options.dom.src = convertImage(this.layoutCanvas);
|
|
(_e = this.watermarkCanvas) === null || _e === void 0 ? void 0 : _e.clear();
|
|
this.drew = true;
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
ImageWatermark.prototype.destroy = function () {
|
|
this.options.dom.src = this.originalSrc;
|
|
this.drew = false;
|
|
};
|
|
ImageWatermark.prototype.getBackgroundImage = function () {
|
|
if (this.options.dom) {
|
|
return this.options.dom;
|
|
}
|
|
};
|
|
return ImageWatermark;
|
|
}());
|
|
|
|
exports.BlindWatermark = BlindWatermark;
|
|
exports.ImageWatermark = ImageWatermark;
|
|
exports.Watermark = Watermark;
|
|
|
|
}));
|
|
//# sourceMappingURL=index.umd.js.map
|