需求分析
水印效果如下：
除了直覺需求，還有非直覺需求。
這是個背景圖。
文字樣式以及文字本身可調整。
對于需求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;
}