前端页面填加水印方案及实现

一、背景

最近有个项目需要在页面上加上水印。这里尝试了一个实现方案。

二、实现

1.利用canvas绘制水印信息

   var can = document.createElement('canvas');
    can.width = 250;
    can.height = 150;
    var cans = can.getContext('2d');
    cans.rotate(-20 * Math.PI / 180);
    cans.font = '17px Vedana';
    // ziti yanse
    cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
    cans.textAlign = 'left';
    cans.textBaseline = 'Middle';
    cans.fillText("水印数据", xIndex , yIndex); //绘制水印文案
}

2.页面展示水印

• 将图片转为dataURL(base64)

canvas.toDataURL('image/png') 

• 创建一个div用于展示

var div = document.createElement('div');
div.style.background = 'url(' + can.toDataURL('image/png') + ') left