前端添加水印，引用wm.js 即可
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="wm.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
Yes
</div>
<script>
gwm.creation({
destroy: false,
txt: '水印文字',
color: 'black',
fontSize: '18'
})
</script>
</body>
</html>
JavaScript wm.min.js
!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).gwm = e() }(this, function () { "use strict"; var o = function (t) { var e = void 0 === (i = t.txt) ? (new Date).toLocaleDateString() + " Top secret" : i, n = void 0 === (d = t.x) ? 0 : d, r = void 0 === (a = t.y) ? 50 : a, o = void 0 === (c = t.font) ? "microsoft yahe" : c, i = void 0 === (s = t.color) ? "#000" : s, a = void 0 === (d = t.fontSize) ? 12 : d, s = void 0 === (c = t.alpha) ? .1 : c, c = void 0 === (d = t.width) ? 158 : d, d = void 0 === (d = t.height) ? 100 : d, t = void 0 === (t = t.angle) ? -15 : t; this.txt = e, this.width = c, this.height = d, this.x = n, this.y = r, this.font = o, this.fontSize = a, this.color = i, this.alpha = s, this.angle = t }, i = (t.prototype.render = function () { var t = this.watermark, e = t.txt, n = t.x, r = t.y, o = t.width, i = t.height, a = t.color, s = t.font, c = t.fontSize, d = t.alpha, t = t.angle; return "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + o + 'px" height="' + i + 'px">\n <text x="' + n + 'px" y="' + r + 'px" dy="' + c + 'px"\n text-anchor="start"\n stroke="' + a + '"\n stroke-opacity="' + d + '"\n fill="none"\n transform="rotate(' + t + "," + n + " " + r + ')"\n font-weight="100"\n font-size="' + c + '"\n font-family="' + s + '"\n >\n ' + e + "\n </text>\n </svg>"))) }, t); function t(t) { this.watermark = t } var a = (e.prototype.render = function () { var t = this.watermark, e = t.txt, n = t.x, r = t.y, o = t.width, i = t.height, a = t.font, s = t.color, c = t.fontSize, d = t.alpha, h = t.angle, t = this.canvas.getContext("2d"); if (null === t) throw new Error("getContext error"); return t.clearRect(0, 0, o, i), t.textBaseline = "top", t.textAlign = "left", t.fillStyle = s, t.globalAlpha = d, t.font = c + "px " + a, t.translate(n, r), t.rotate(Math.PI / 180 * h), t.translate(-n, -r - c), t.fillText(e, n, r + c), this.canvas.toDataURL() }, e); function e(t) { var e = (this.watermark = t).width, t = t.height; this.canvas = document.createElement("canvas"), this.canvas.setAttribute("width", "" + e), this.canvas.setAttribute("height", "" + t) } function s() { for (var t = [], e = 0; e < arguments.length; e++)t[e] = arguments[e]; var n = (r = t.filter(function (t) { return t }))[0], r = r.slice(1); return Object.assign.apply(null, function () { for (var t = 0, e = 0, n = arguments.length; e < n; e++)t += arguments[e].length; for (var r = Array(t), o = 0, e = 0; e < n; e++)for (var i = arguments[e], a = 0, s = i.length; a < s; a++, o++)r[o] = i[a]; return r }([n], r)) } function l(t, e, n) { var r, o, i, a = s(t.style, e); for (r in a) "normal" !== n ? t.style.setProperty ? t.style.setProperty(r, e[r], "important") : (o = t.getAttribute("style"), i = [r.replace(/([A-Z])/g, "_$1").toLowerCase(), e[r] + "!important;"].join(":"), t.setAttribute("style", [o, i].join(" ").trim())) : t.style[r] = a[r]; return t } var c = (n.prototype.createItem = function () { var t = this.watermark, e = t.txt, n = t.x, r = t.y, o = t.font, i = t.color, a = t.fontSize, s = t.alpha, c = t.angle, d = t.width, h = t.height, t = document.createElement("div"); l(t, Object.create({ position: "relative", width: d + "px", height: h + "px", flex: "0 0 " + d + "px", overflow: "hidden", pointerEvents: "none" }), "normal"); d = document.createElement("span"); return d.innerHTML = e, l(d, Object.create({ position: "absolute", top: r + "px", left: n + "px", fontFamily: o, fontSize: a + "px", color: i, lineHeight: 1.5, opacity: s, fontWeight: 400, transform: "rotate(" + c + "deg)", transformOrigin: "0 0", userSelect: "none", whiteSpace: "nowrap", overflow: "hidden" }), "normal"), t.appendChild(d), t }, n.prototype.render = function () { var t = 0, e = this.watermark, n = e.width, r = e.height, o = document.documentElement || document.body, e = o.clientWidth, o = o.clientHeight, i = Math.ceil(e / n), a = Math.ceil(o / r), s = document.createElement("div"); for (l(s, Object.create({ display: "flex", flexWrap: "wrap", width: n * i + "px", height: r * a + "px" }), "normal"); t < i * a; t++)s.appendChild(this.createItem()); return s }, n); function n(t) { this.watermark = t } var d = MutationObserver || WebKitMutationObserver || MozMutationObserver; function r(e, t, n) { if (!d) return r = e, o = t, i = n, (a = ["DOMAttrModified", "DOMAttributeNameChanged", "DOMCharacterDataModified", "DOMElementNameChanged", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified"]).map(function (t) { return r.addEventListener(t, function () { return i() }, !1) }), document.body.addEventListener("DOMSubtreeModified", function () { return i() }, !1), { containerObserver: { disconnect: function () { return o.removeEventListener("DOMSubtreeModified", function () { return i() }, !1) } }, targetObserver: { disconnect: function () { return a.map(function (t) { return r.removeEventListener(t, function () { return i() }, !1) }) } } }; var r, o, i, a, s = new d(function (t) { t.forEach(function (t) { t.removedNodes.forEach(function (t) { t === e && n() }) }) }); return s.observe(t, { childList: !0 }), (t = new MutationObserver(n)).observe(e, { characterData: !0, attributes: !0, childList: !0, subtree: !0 }), { containerObserver: s, targetObserver: t } } function h(t) { var e = t.gwmDom, t = Object.create(t.opts.css); return e && e.remove(), e = document.createElement("div"), "pointerEvents" in document.documentElement.style && (t.pointerEvents = "none", t.zIndex = 0 < parseInt("" + t.zIndex, 10) ? t.zIndex : "999999"), l(e, t), e } var u, f, p = Object.create({ position: "fixed", top: 0, right: 0, bottom: 0, left: 0, overflow: "hidden", zIndex: -10, backgroundRepeat: "no-repeat", display: "block", opacity: "1" }); (f = u = u || {}).CANVAS = "canvas", f.SVG = "svg", f.ELEMENT = "element"; function m() { } return new (m.prototype.creation = function (t) { this.opts = t, this.opts.css = s(p, t.css), this.cancel(); var e = t.mode, n = t.watch, r = t.container, r = void 0 === r ? document.body : r; this.wrap = function (t) { if ("string" != typeof t) return t; t = document.querySelector(t); return t || document.body }(r), this.wrap !== document.body && (this.opts.css.position = "absolute", l(this.wrap, Object.create({ position: "relative" }))), this.gwmDom = h(this); r = new o(t), r = function (t, e) { switch (t) { case u.CANVAS: return new a(e); case u.SVG: return new i(e); default: return new c(e) } }(e || u.SVG, r).render(); e === u.ELEMENT ? this.gwmDom.appendChild(r) : this.gwmDom.style.background = 'url("' + r + '")'; r = this.wrap.firstChild; r ? this.wrap.insertBefore(this.gwmDom, r) : this.wrap.appendChild(this.gwmDom), "boolean" != typeof n || n || (this.observer = this.observing()), t.destroy && (this.creation = function (t) { return t }) }, m.prototype.observing = function () { var t = this; return r(this.gwmDom, this.wrap, function () { return t.creation(t.opts) }) }, m.prototype.cancel = function () { var t, e; this.observer && (t = this.observer, e = t.containerObserver, t = t.targetObserver, e.disconnect(), t.disconnect()) }, m) });
效果
文章评论