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
