需求分析

水印效果如下：

除了直觀需求，還有非直觀需求。

這是個背景圖。

文字樣式以及文字本身可調整。

對于需求1，需要前端生成圖片的能力。
該能力的原理：借用canvas.toDataURL()或者(new XMLSerializer()).serializeToString()生成base64編碼。
然后就可以很方便地設置背景圖了。

對于需求2，canvas或svg，或者CSS3都能實現。
這里使用svg，因為它比較親民。

擼函數

下面是svg生成文字的函數。

function getSVGTextBase64(text, svgStyle) {var svgNS = 'http://www.w3.org/2000/svg';function createTag(tag, objAttr) {var oTag = document.createElementNS(svgNS, tag);for (var attr in objAttr) {oTag.setAttribute(attr, objAttr[attr]);}return oTag;}svgStyle = Object.assign({'width': '50px','height': '50px','text-anchor': 'left','font-size': '12px','transform': 'translate(0 50) rotate(-15)','x': '0','y': '1em',}, svgStyle);var oSvg = createTag('svg', { 'xmlns': svgNS, 'width': svgStyle.width, 'height': svgStyle.height, });var oText = createTag('text', svgStyle);oText.innerHTML = text;oSvg.appendChild(oText);return oSvg; }

這里涉及到的知識點有：

Object.assign

svg命名空間

svg的文字樣式屬性

壞消息是HTML樣式和SVG樣式屬性名稱有部分不一樣，好消息是大部分可一一對應。

接下來要把生成的svg序列化，序列化成base64編碼。

function encode(input) {function utf8_encode(string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);}else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);}else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;}var output = "";var chr1, chr2, chr3, enc1, enc2, enc3, enc4;var i = 0;var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";input = utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +_keyStr.charAt(enc3) + _keyStr.charAt(enc4);}return output; }

這個函數涉及到的知識點有：

關于base64編碼的原理及實現

Data URI scheme

完整的代碼

function getSVGTextBase64(text, svgStyle) {var svgNS = 'http://www.w3.org/2000/svg';function createTag(tag, objAttr) {var oTag = document.createElementNS(svgNS, tag);for (var attr in objAttr) {oTag.setAttribute(attr, objAttr[attr]);}return oTag;}function encode(input) {function utf8_encode(string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);}else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);}else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;}var output = "";var chr1, chr2, chr3, enc1, enc2, enc3, enc4;var i = 0;var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";input = utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +_keyStr.charAt(enc3) + _keyStr.charAt(enc4);}return output;}svgStyle = Object.assign({'width': '50px','height': '50px','text-anchor': 'left','font-size': '12px','transform': 'translate(0 50) rotate(-15)','x': '0','y': '1em',}, svgStyle);var oSvg = createTag('svg', { 'xmlns': svgNS, 'width': svgStyle.width, 'height': svgStyle.height, });var oText = createTag('text', svgStyle);oText.innerHTML = text;oSvg.appendChild(oText);var svgStr = new XMLSerializer().serializeToString(oSvg);var bgUrl = 'data:image/svg+xml;base64,' + encode(svgStr);return bgUrl; }

總結

以上是生活随笔為你收集整理的实现一个简单的前端水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。