生成水印遮罩

效果

svg 生成方式

svg 与 canvas 相比浏览器兼容性几乎一致，除了几个早起的 Android 版本，这样的设备以及很难找到了，完全可以忽略。svg 使用的是 XML 的方式，不依赖分辨率，在做水印这件事上 svg 有着更好的优势。

function wateRmark(userName, comName) {
  var svgContent = "<svg width='200' height='200' xmlns='http://www.w3.org/2000/svg'>" +
    "<text x='50%' y='50%' font-size='14' font-weight='800' fill-opacity='0.1' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'>" +
    userName + "</text><text x='30%' y='50%' font-size='14' font-weight='800' fill-opacity='0.1' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 50 60)'>" +
    comName + "</text></svg>"
  var base64 = window.btoa(unescape(encodeURIComponent(svgContent)))
  var base64Url = "data:image/svg+xml;base64," + base64
  var wate = document.createElement('div')
  wate.style.background = 'url(' + base64Url + ') repeat'
  wate.style.position = 'fixed'
  wate.style.left = 0
  wate.style.right = 0
  wate.style.top = 0
  wate.style.bottom = 0
  wate.style.zIndex = '9999'
  wate.style.pointerEvents = 'none'
  document.body.appendChild(wate)
}

canvas 生成方式

canvas 有着不错的兼容性，是一种比较可靠、成熟的可视化技术。但是它比较依赖分辨率，对文本的处理上也有着先天的不足。但是它可以很方便的将结果保存为图片，对于完成水印的需求也是非常合适的。

function renderWateRmark(userName, comName) {
    var canvas = document.createElement('canvas')
    canvas.setAttribute('width', 200)
    canvas.setAttribute('height', 200)
    var ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, 200, 200)
    ctx.textBaseline = 'top'
    ctx.textAlign = 'left'
    ctx.fillStyle = '#e5e5e5'
    ctx.globalAlpha = 0.4
    ctx.font = '800 14px Microsoft YaHei'
    ctx.translate(20, 100) 
    ctx.rotate(Math.PI / 180 * -45)
    ctx.fillText(comName, 0, 14)
    ctx.fillText(userName, 40, 38)
    var wate1 = document.createElement('div')
    wate1.style.background = 'url(' + canvas.toDataURL() + ') repeat'
    wate1.style.position = 'fixed'
    wate1.style.left = 0
    wate1.style.right = 0
    wate1.style.top = 0
    wate1.style.bottom = 0
    wate1.style.zIndex = '9999'
    wate1.style.pointerEvents = 'none'
    document.body.appendChild(wate1)
}