let watermark = {}
/*
@desc:给指定的元素添加水印
@params { Object }obj
@params1 { String } canvasId canvas元素
@params2 { String } contentId canvas父容器元素
@params3 { String } canW canvas生成图标的宽度
@params4 { String } canH canvas生成图标的高度
@params5 { String } texts 水印的文字
@return { String } canvas的ID
*/
let setWatermark = ( obj ) => {
const{ canvasId,contentId,canW,canH,texts } = obj;
let id = canvasId || 'canvasIds_123123';
let contentEle = document.getElementById(contentId);
if(!contentEle) return;
let canvasEle = document.getElementById(id);
if (canvasEle !== null) {
contentEle.removeChild(canvasEle);
}
let can = document.createElement('canvas');
can.width = canW||300
can.height = canH||200
let cans = can.getContext('2d');
//设置canvas文字的翻转度数
cans.rotate(-18 * Math.PI / 180);
//设置文字样式
cans.font = '22px Vedana'
cans.fillStyle = 'rgba(130, 132, 138, 0.40)'
cans.textAlign = 'center'
cans.textBaseline = 'Middle'
//填充文字并设置文字距离图片的left和top位置
cans.fillText(texts,canW/4,canH/4)
//生成承载图片的容器div
let div = document.createElement('div');
div.id = id;
//设置容器的样式
div.style.pointerEvents = 'none'
div.style.top = '70px'
div.style.left = '0px'
div.style.position = 'absolute'
div.style.zIndex = '10'
div.style.width = contentEle.offsetWidth + 'px'
div.style.height = '100%';
//将生成的图片放入容器中作为背景图
div.style.background = 'url(' + can.toDataURL('image/png') + ') center center repeat'
//最终将该容器添加到需要水印的元素中
contentEle.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set = (str) => {
setWatermark(str)
}
/*
@desc:删除指定元素上的水印
@params { Object }obj
@params1 { String } canvasId canvas元素
@params2 { String } contentId canvas父容器元素
@return { null }
*/
watermark.remove = (obj) => {
const{ canvasId,contentId } = obj;
let id = canvasId || '1.23452384164.123412415'
let contentEle = document.getElementById(contentId);
if(!contentEle) return;
let canvasEle = document.getElementById(id);
if (canvasEle !== null) {
contentEle.removeChild(canvasEle)
}
}
export default watermark