vue網頁新增水印

2022-06-18 12:12:13 字數 1148 閱讀 4507

水印新增方式: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...