水印新增方式:1.新建 watermark.js 內容如下
let watermarkoption ={}let setwatermarkcontent = (content) =>
let ele = document.createelement('canvas')
ele.width = 250ele.height = 150let getcanvas = ele.getcontext('2d')
getcanvas.rotate(-20 * math.pi / 180)
getcanvas.font = '20px vedana'getcanvas.fillstyle = 'rgba(200, 200, 200, 0.20)'getcanvas.textalign = 'center'getcanvas.textbaseline = 'middle'getcanvas.filltext(content, ele.width / 3, ele.height / 2)
let div = document.createelement('div')
div.id =id
div.style.pointerevents = 'none'div.style.top = '0px' //
水印距離 上邊的距離
div.style.left = '0px' //
水印距離 左邊的距離
div.style.position = 'fixed'div.style.zindex = '100000'div.style.width = document.documentelement.clientwidth - 100 + 'px' //
生成水印畫布大小的寬度
div.style.height = document.documentelement.clientheight - 100 + 'px' //
生成水印畫布大小的高度
returnid}
//該方法只允許呼叫一次
watermarkoption.set = (content) =>
}, 500)
window.onresize = () =>
}export
default watermarkoption
js網頁新增水印
改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src va...
給網頁新增水印
html js 改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key i...
react網頁新增水印
原理 在頁面覆蓋乙個盒子,取消滑鼠事件,層級最高,透明,用canvas,繪製背景 為了防止內部資料洩露,拍照等等,水印可以新增登入人姓名,公司名等等 借鑑大神的 let watermark letsetwatermark str,option 建立乙個畫布 let can document.crea...