使用import進行引入進行watermark的set方法呼叫//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
在ext中的requires進行引入,呼叫watermarkset進行使用import watermark from
'@/utils/watermark'
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...