前端的水印新增

2021-10-14 16:46:14 字數 2115 閱讀 2013

//ext 使用需要進行定義

ext.

define

("am.ux.watermark",)

;let watermark =

function

setwatermark

(staffno, date)

// 建立乙個畫布

let can = document.

createelement

('canvas'

)// 設定畫布的長寬

can.width =

240 can.height =

240let cans = can.

getcontext

('2d'

)// 旋轉角度

cans.

rotate(-

30* math.pi/

180)

cans.font =

'17px vedana'

// 設定填充繪畫的顏色、漸變或者模式

cans.fillstyle =

'rgba(115, 119, 128, 0.25)'

// 設定文字內容的當前對齊方式

cans.textalign =

'center'

// 設定在繪製文字時使用的當前文字基線

cans.textbaseline =

'middle'

// 在畫布上繪製填色的文字(輸出的文字,開始繪製文字的x座標位置,開始繪製文字的y座標位置)

cans.

filltext

(staffno, can.width /

8, can.height /2)

cans.

filltext

(date, can.width /

16, can.height /

1.7)

let div = document.

createelement

('div'

) div.id = id

div.style.pointerevents =

'none'

div.style.top =

'30px'

div.style.left =

'0px'

div.style.position =

'fixed'

div.style.zindex =

'100000'

div.style.width = document.documentelement.clientwidth +

'px'

div.style.height = document.documentelement.clientheight +

'px'

div.style.background =

'url('

+ can.

todataurl

('image/png')+

') left top repeat'

document.body.

(div)

return id

}// ext方法

function

watermarkset

(staffno, date)},

500)

window.

onresize=(

)=>

}//vue使用

// 該方法只允許呼叫一次

// watermark.set = (staffno, date) =>

// }, 500)

// window.onresize = () =>

// }

//export default watermark

使用import進行引入進行watermark的set方法呼叫

import watermark from

'@/utils/watermark'

在ext中的requires進行引入,呼叫watermarkset進行使用

requires:

['am.ux.watermark'

]

Web前端實驗 新增明 暗水印

頁面簡單,四個imgbox,從左到右分別是原影象 含有可見水印的影象 被新增的數字水印和新增了該數字水印的結果圖,採用flex布局 明水印參考從破解某設計 談前端水印 詳細教程 水印內容 我愛web前端 暗水印參考不能說的秘密 前端也能玩的隱寫術 首先要獲取文字的畫素資訊,先用 canvas 在畫布...

iOS 新增水印

新增水印,這個需求要求調研時,因為是新的技術點,查閱了一些資料。資料中統統都說 獲取介面的rgb值,將需要加密的資訊翻譯成二進位制,通過位運算,新增到每個rgb值的二進位制末尾實現。解碼時線取介面的rgb二進位制值,通過位運算,得出加密資訊的二進位制即可。網上給了一些獲得介面rgb的方法,我按照其方...

js新增水印

watermark 傳入動態水印內容 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src var otemp d...