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