需求分析
水印效果如下：
除了直观需求，还有非直观需求。
- 这是个背景图。
- 文字样式以及文字本身可调整。
对于需求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;} 这里涉及到的知识点有：
坏消息是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;} 这个函数涉及到的知识点有：
完整的代码
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;}