invisible-watermark
Version:
watermark auto injector
132 lines (131 loc) • 7.6 kB
JavaScript
import * as tslib_1 from "tslib";
import initObserver from './mutationObserver';
import { measureText, resolveText } from './util';
import { SSO_API } from './constant';
var WaterMark = /** @class */ (function () {
function WaterMark(options) {
if (options === void 0) { options = {}; }
this.resolvedText = [];
this.options = tslib_1.__assign({ sso: SSO_API, text: '', mode: 'canvas', angle: 0, gap: 80, fontSize: 13, fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'", color: 'rgba(0,0,0,0.01)', el: null }, options);
}
Object.defineProperty(WaterMark.prototype, "getPixelRatio", {
get: function () {
return window.devicePixelRatio || 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(WaterMark.prototype, "getBaseValue", {
get: function () {
var _a = this.options, fontSize = _a.fontSize, gap = _a.gap;
var texts = this.resolvedText;
var maxTextWidth = Math.max.apply(Math, texts.map(function (text) { return measureText(text); }));
return {
maxTextWidth: maxTextWidth,
baseWidth: maxTextWidth + gap,
baseHeight: fontSize * texts.length + 60,
};
},
enumerable: true,
configurable: true
});
WaterMark.prototype.resolveByCanvas = function (options) {
var resolvedText = options.resolvedText, fontFamily = options.fontFamily, fontSize = options.fontSize, color = options.color, angle = options.angle;
var _a = this.getBaseValue, baseWidth = _a.baseWidth, baseHeight = _a.baseHeight;
var watermarkEl = document.createElement('canvas');
var ctx = watermarkEl && watermarkEl.getContext && watermarkEl.getContext('2d');
var ratio = this.getPixelRatio;
watermarkEl.width = baseWidth * ratio;
watermarkEl.height = baseHeight * ratio;
ctx.font = fontSize * ratio + "px " + fontFamily;
ctx.textAlign = 'center';
ctx.translate(watermarkEl.width / 2, watermarkEl.height / 2);
ctx.rotate(angle * (Math.PI / 180));
ctx.textBaseline = 'middle';
ctx.fillStyle = color;
resolvedText.forEach(function (text, rowIndex) {
ctx.fillText(text, 0, fontSize * ratio * rowIndex);
});
ctx.scale(ratio, ratio);
return new Promise(function (resolve, reject) {
if (watermarkEl.toBlob) {
watermarkEl.toBlob(function (blob) {
resolve((URL || webkitURL).createObjectURL(blob));
});
}
else {
resolve(watermarkEl.toDataURL());
}
});
};
WaterMark.prototype.resolveBySvg = function (options) {
var fontSize = options.fontSize, resolvedText = options.resolvedText, color = options.color, angle = options.angle, fontFamily = options.fontFamily;
var _a = this.getBaseValue, baseWidth = _a.baseWidth, baseHeight = _a.baseHeight;
var svgStr = "\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"" + baseWidth + "px\"\n height=\"" + baseHeight + "px\"\n >\n <foreignObject\n width=\"" + baseWidth + "\"\n height=\"" + baseHeight + "\"\n x=\"" + 0 + "\"\n y=\"" + (baseHeight - fontSize * resolvedText.length) / 2 + "\"\n dy=\"" + fontSize + "px\"\n transform=\"rotate(" + angle + " " + baseWidth / 2 + " " + baseHeight / 2 + ")\"\n >\n <body xmlns=\"http://www.w3.org/1999/xhtml\">\n " + resolvedText
.map(function (text) { return "\n <p style=\"\n text-align:center;\n line-height:" + fontSize + "px;\n font-size:" + fontSize + "px;\n font-family: '" + fontFamily + "';\n margin:0;\n color: " + color + "\"\n >\n " + text + "\n </p>"; })
.join('') + "\n </body>\n </foreignObject>\n </svg>\n ";
return "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgStr)));
};
WaterMark.prototype.resolveBackgroundImageUrl = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var mode, _a, _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
mode = this.options.mode;
_a = this;
return [4 /*yield*/, resolveText(this.options)];
case 1:
_a.resolvedText = _c.sent();
_b = {};
return [4 /*yield*/, this[{ canvas: 'resolveByCanvas', svg: 'resolveBySvg' }[mode]](tslib_1.__assign({ resolvedText: this.resolvedText }, this.options))];
case 2: return [2 /*return*/, (_b.url = _c.sent(),
_b.width = this.getBaseValue.baseWidth,
_b)];
}
});
});
};
WaterMark.prototype.render = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, blobUrl, width, el, watermarkEl, id;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.resolveBackgroundImageUrl()];
case 1:
_a = _b.sent(), blobUrl = _a.url, width = _a.width;
el = this.options.el;
if (!el) {
watermarkEl = document.createElement('div');
id = "wm_" + +new Date();
watermarkEl.id = id;
watermarkEl.style.backgroundImage = "url(" + blobUrl + ")";
watermarkEl.style.backgroundRepeat = 'space repeat';
watermarkEl.style.backgroundSize = width + "px";
watermarkEl.style.width = '100%';
watermarkEl.style.height = "100%";
watermarkEl.style.position = 'fixed';
watermarkEl.style.bottom = '0';
watermarkEl.style.left = '0';
watermarkEl.style.zIndex = '1';
watermarkEl.style.pointerEvents = 'none';
document.body.appendChild(watermarkEl);
initObserver(watermarkEl);
initObserver(document.body);
}
else if (el instanceof HTMLDivElement || el instanceof HTMLBodyElement) {
el.style.backgroundImage = "url(" + blobUrl + ")";
el.style.backgroundRepeat = 'space repeat';
el.style.backgroundSize = this.getBaseValue.baseWidth + "px";
}
return [2 /*return*/];
}
});
});
};
return WaterMark;
}());
export default WaterMark;
export var autoInject = function (options) {
return new WaterMark(options).render();
};