使用JS代碼實(shí)現(xiàn)頁(yè)面添加水印的方法詳解
更新時(shí)間：2024年05月01日 07:54:10 作者：日升
這篇文章主要介紹了使用80 行 JS 代碼實(shí)現(xiàn)頁(yè)面添加水?。何淖炙 ⒍嘈形淖炙?、圖片水印、文字&圖片水印,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
一、水印概括
1. 添加水印的好處
- 信息標(biāo)識(shí)： 水印可以用于標(biāo)識(shí)文檔的所有者、保密級(jí)別、狀態(tài)或其他相關(guān)信息，幫助用戶更好地理解文檔內(nèi)容的屬性。
- 版權(quán)保護(hù)： 在文檔中添加水印可以幫助保護(hù)內(nèi)容的版權(quán)，防止他人未經(jīng)授權(quán)地復(fù)制、轉(zhuǎn)載或篡改內(nèi)容。
- 安全保護(hù)： 對(duì)于敏感信息或機(jī)密文檔，添加水印可以幫助防止信息泄露，提高文檔的安全性。
- 提升專業(yè)性： 在一些場(chǎng)景下，如商業(yè)報(bào)告、合同文件等，添加水印可以增加文檔的專業(yè)性和正式性。
- 防止截屏或拷貝： 在網(wǎng)頁(yè)中添加水印可以防止用戶通過(guò)截屏或復(fù)制粘貼等方式非法獲取文檔內(nèi)容。
2. 添加水印的壞處
- 視覺(jué)干擾： 過(guò)多或過(guò)顯眼的水印可能會(huì)影響頁(yè)面的美觀度和可讀性，甚至干擾用戶對(duì)頁(yè)面內(nèi)容的瀏覽和理解。
- 性能影響： 在頁(yè)面中添加水印可能會(huì)增加頁(yè)面加載時(shí)間和資源消耗，特別是對(duì)于大型或復(fù)雜的水印圖案或動(dòng)態(tài)水印。
- 用戶體驗(yàn)： 一些用戶可能會(huì)認(rèn)為水印對(duì)頁(yè)面內(nèi)容的查看和操作產(chǎn)生不必要的干擾，從而降低他們的使用體驗(yàn)。
- 不適用于移動(dòng)端： 在移動(dòng)設(shè)備上，屏幕空間有限，添加水印可能會(huì)占用寶貴的屏幕空間，影響用戶的閱讀和操作。
二、技術(shù)方案
1. watermark 第三方庫(kù)
優(yōu)勢(shì)：已有 github 庫(kù)，可直接使用 劣勢(shì)：
- 庫(kù)比較老，多年未更新
- 只支持圖片水印，不支持文案水印
- 不支持多行水印
- 包比較重，增加
SDK負(fù)擔(dān)
2. JS 簡(jiǎn)單實(shí)現(xiàn)水印功能
優(yōu)勢(shì)：
- 可支持圖片和文案水印
- 封裝函數(shù)即可，輕量 劣勢(shì)：需要自己封裝
三、水印功能實(shí)現(xiàn)
1. 水印功能需求
- 需要支持文案和圖片
- 可設(shè)置文案顏色字體等樣式
- 可支持多行文字水印
- 可動(dòng)態(tài)控制水印間隔
- 能鋪滿全屏
- 可旋轉(zhuǎn)
- 不影響頁(yè)面其他模塊背景展示
2. 功能實(shí)現(xiàn)
/**
* 水印功能代碼實(shí)現(xiàn)
*/
interface IWarterMarkProps{
text?: string | string[] // 水印文案
imgUrl?: string // 水印圖片
imageOpacity?: number // 圖片透明度
fontStyle?: string // 字體樣式
fontVariant?: string // 字體變體
fontWeight?: number // 字體粗細(xì)
fontFamily?: string // 字體
fontSize?: number // 字體大小
lineHeight?: number // 字體行高
fontColor?: string // 字體顏色
rotate?: number // 水印旋轉(zhuǎn)角度 deg
canvasRotate?: number // canvas 旋轉(zhuǎn)角度 deg
imageWidth?: number // 圖片寬度
imageHeight?: number // 圖片高度
xOffset?: number // 水印 x 偏移
yOffset?: number // 水印 y 偏移
width?: number // 寬度
height?: number // 高度
zIndex: number // 層級(jí)
}
interface ISetDomProps{
url: string // 圖片 URL
rotate?: number // 水印旋轉(zhuǎn)角度
zIndex?: number // 層級(jí)
width?: number // 寬度
}
/**
* 設(shè)置 dom CSS 屬性
* @param {ISetDomProps} props dom 數(shù)據(jù)類型
*/
const setDomCSSAttr = (props: ISetDomProps) => {
const {
url, rotate = 0, zIndex = 10, width = 32
} = props
let waterMarker = document.getElementById('water-marker')
let isInitDom = true
if (!waterMarker) {
isInitDom = false
waterMarker = document.createElement('div')
waterMarker.id = 'water-marker'
}
Object.assign(waterMarker.style, {
transform: rotate ? `rotate(${rotate}deg)` : '',
backgroundSize: `${width}px`,
backgroundImage: `url(${url}), url(${url})`,
backgroundRepeat: 'repeat',
position: 'fixed',
left: 0,
top: 0,
zIndex,
width: '100vw',
height: '100vh',
pointerEvents: 'none',
mixBlendMode: 'multiply'
});
!isInitDom && document.body.appendChild(waterMarker)
}
/**
* 獲取 canvas 像素比
* @param {CanvasRenderingContext2D} context
* @returns 像素比
*/
const getRatio = (context: any) => {
if (!context) {
return 1;
}
const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1
return (window.devicePixelRatio || 1) / backingStore
}
/**
* 設(shè)置水印
* @param {IWarterMarkProps} props 水印各種屬性
*/
const setWarterMarker = (props: IWarterMarkProps) => {
const {
imgUrl = '', imageOpacity = 1, imageWidth = 0, imageHeight = 0, fontColor = 'rgba(128, 128, 128, .2)',
fontVariant = 'normal', fontWeight = 400, fontSize = 14, lineHeight = 14, fontStyle = 'normal', fontFamily = 'arial', rotate = 0, canvasRotate = 0,
yOffset = 0, xOffset = 0, width = 200, height = 200, zIndex = 10,
} = props
const text = typeof props.text === 'object' ? props.text : props.text ? [props.text] : []
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
const ratio = getRatio(ctx);
const canvasWidth = width * ratio
const canvasHeight = height * ratio
const canvasOffsetLeft = xOffset * ratio
const canvasOffsetTop = yOffset * ratio
canvas.width = canvasWidth
canvas.height = canvasHeight
ctx.rotate(canvasRotate * (Math.PI / 180));
let url = ''
if (text.length) {
ctx.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize * ratio}px/${lineHeight * ratio}px ${fontFamily || getComputedStyle(document.body).fontFamily}`
ctx.fillStyle = fontColor
text.forEach((content, index) => {
ctx.fillText(content, canvasOffsetLeft, index * lineHeight + canvasOffsetTop + lineHeight * ratio)
})
url = canvas.toDataURL()
}
if (imgUrl) {
const img = new Image();
img.crossOrigin = 'anonymous';
img.referrerPolicy = 'no-referrer';
img.src = imgUrl;
img.onload = () => {
ctx.globalAlpha = imageOpacity
ctx.drawImage(img, canvasOffsetLeft, canvasOffsetTop, (imageWidth || (imageHeight ? img.width * imageHeight / img.height : img.width)) * ratio, (imageHeight || (imageWidth ? img.height * imageWidth / img.width : img.height)) * ratio)
setDomCSSAttr({
url: canvas.toDataURL(),
rotate,
zIndex,
width
})
return
};
return
}
setDomCSSAttr({
url,
rotate,
zIndex,
width
})
}
3. 步驟解析
3.1. setWarterMarker 方法
setWarterMarker 是使用水印的方法，參數(shù)是一個(gè)對(duì)象，包含以下內(nèi)容
interface IWarterMarkProps{
text?: string | string[] // 水印文案
imgUrl?: string // 水印圖片
imageOpacity?: number // 圖片透明度
fontStyle?: string // 字體樣式
fontVariant?: string // 字體變體
fontWeight?: number // 字體粗細(xì)
fontFamily?: string // 字體
fontSize?: number // 字體大小
lineHeight?: number // 字體行高
fontColor?: string // 字體顏色
rotate?: number // 水印旋轉(zhuǎn)角度 deg
canvasRotate?: number // canvas 旋轉(zhuǎn)角度 deg
imageWidth?: number // 圖片寬度
imageHeight?: number // 圖片高度
xOffset?: number // 水印 x 偏移
yOffset?: number // 水印 y 偏移
width?: number // 寬度
height?: number // 高度
zIndex: number // 層級(jí)
}
- 獲取各個(gè)參數(shù)值
- 創(chuàng)建
canvas，獲取canvas的像素比，設(shè)置canvas的各種參數(shù) - 如果存在
text屬性，則進(jìn)行遍歷繪制 - 如果有圖片，則創(chuàng)建
image，再進(jìn)行繪制 - 生成
url，通過(guò)setDomCSSAttr方法進(jìn)行 dom 渲染
3.2. getRatio 方法
獲取 canvas 的像素比，更清晰的繪制 canvas
3.3. setDomCSSAttr 方法
接收一個(gè)對(duì)象，包含以下內(nèi)容
interface ISetDomProps{
url: string // 圖片 URL
rotate?: number // 水印旋轉(zhuǎn)角度
zIndex?: number // 層級(jí)
width?: number // 寬度
}
- 查找/創(chuàng)建
dom元素 - 設(shè)置
style屬性transform: 旋轉(zhuǎn)backgroundSize：背景大小backgroundImage：背景圖片backgroundRepeat：背景重復(fù)position：定位zIndex：層級(jí)pointerEvents：不能被選中mixBlendMode：控制元素的混合模式
3.4. CSS mix-blend-mode 屬性
mix-blend-mode 是 CSS 中的一個(gè)屬性，用于控制元素的混合模式。它可以讓元素的背景色和內(nèi)容色以一種特定的方式混合在一起，從而產(chǎn)生各種視覺(jué)效果。 以下是一些常用的 mix-blend-mode 值：
- normal：默認(rèn)值，內(nèi)容色完全覆蓋背景色。
- multiply：將內(nèi)容色與背景色相乘。通常用于創(chuàng)建暗色效果。
- screen：將內(nèi)容色與背景色相除，并取反。通常用于創(chuàng)建亮色效果。
- overlay：結(jié)合了
multiply和screen模式，根據(jù)背景色的亮度來(lái)決定內(nèi)容色的混合模式。 - darken：內(nèi)容色和背景色中的每個(gè)像素值，取對(duì)應(yīng)像素值的較小者。
- lighten：內(nèi)容色和背景色中的每個(gè)像素值，取對(duì)應(yīng)像素值的較大者。
- color-dodge：顏色減淡，通過(guò)減少背景色的值來(lái)增加內(nèi)容色的亮度。
- color-burn：顏色加深，通過(guò)增加背景色的值來(lái)降低內(nèi)容色的亮度。
- difference：計(jì)算內(nèi)容色和背景色之間的差異，產(chǎn)生顏色反轉(zhuǎn)的效果。
- exclusion：將內(nèi)容色和背景色相減，并添加其結(jié)果的兩倍。
- hue：保留內(nèi)容色的色相，并使用背景色的飽和度和亮度。
- saturation：保留內(nèi)容色的飽和度，并使用背景色的色相和亮度。
- color：保留內(nèi)容色的色相和飽和度，并使用背景色的亮度。
- luminosity：保留內(nèi)容色的亮度，并使用背景色的色相和飽和度。
使用 mix-blend-mode 屬性，可以輕松地創(chuàng)建各種視覺(jué)效果，例如顏色混合、遮罩效果等。
三、水印使用
1. 文字
setWarterMarker({
text: '這是水印， 這是水印， 這是水印',
width: 200,
height: 200,
fontColor: 'red',
fontSize: 8,
lineHeight: 10,
})
2. 圖片
setWarterMarker({
imgUrl: 'https://sponsors.vuejs.org/images/chrome_frameworks_fund.png',
imageHeight: 50,
imageWidth: 50,
imageOpacity: 0.1,
})
3. 圖片和文字結(jié)合
setWarterMarker({
text: '這是水印， 這是水印， 這是水印',
width: 200,
height: 200,
fontColor: 'red',
fontSize: 8,
lineHeight: 10,
imgUrl: 'https://sponsors.vuejs.org/images/chrome_frameworks_fund.png',
imageHeight: 50,
imageWidth: 50,
imageOpacity: 0.1,
canvasRotate: 15
})
4. 多行水印和圖片
setWarterMarker({
text: ['這是水印， 這是水印， 這是水印', '第二行水印', '第三行水印', '第四行水印'],
width: 200,
height: 200,
fontColor: 'red',
fontSize: 8,
lineHeight: 40,
imgUrl: 'https://sponsors.vuejs.org/images/chrome_frameworks_fund.png',
imageHeight: 50,
imageWidth: 50,
imageOpacity: 0.1,
})
四、總結(jié)
- 水印技術(shù)調(diào)研顯示，水印在保護(hù)版權(quán)、信息標(biāo)識(shí)和安全保護(hù)方面具有重要作用。
- 通過(guò)CSS、JavaScript或第三方庫(kù)，可以實(shí)現(xiàn)頁(yè)面水印功能。
- 過(guò)多或顯眼的水印可能影響用戶體驗(yàn)，而性能和兼容性也是考慮的因素。
- 綜合評(píng)估水印的利弊，可結(jié)合實(shí)際需求謹(jǐn)慎選擇適合的實(shí)現(xiàn)方式。
- 如果需求有更復(fù)雜的水印，可以按步驟去改即可。
以上就是使用JS代碼實(shí)現(xiàn)頁(yè)面添加水印的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JS頁(yè)面添加水印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js實(shí)現(xiàn)文字在按鈕上滾動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字在按鈕上滾動(dòng)的方法,涉及javascript動(dòng)態(tài)定時(shí)操作頁(yè)面元素樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
輸入密碼檢測(cè)大寫(xiě)是否鎖定js實(shí)現(xiàn)代碼
網(wǎng)站登錄為了更好的用戶體驗(yàn)都會(huì)在輸入密碼的時(shí)候檢測(cè)是否開(kāi)啟大寫(xiě)，這樣有助于提醒用戶,需要學(xué)習(xí)的朋友可以參考下2012-12-12
這篇文章主要介紹了JS判斷點(diǎn)是否在線段上的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
走進(jìn)javascript——不起眼的基礎(chǔ)，值和分號(hào)
本文主要介紹了javascript的基礎(chǔ)知識(shí)--值和分號(hào)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript生成驗(yàn)證碼并實(shí)現(xiàn)驗(yàn)證功能
這篇文章主要介紹了JavaScript生成驗(yàn)證碼并實(shí)現(xiàn)驗(yàn)證功能的相關(guān)資料,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法的相關(guān)資料,在uniapp中要實(shí)現(xiàn)回到頂部的效果有兩種方法實(shí)現(xiàn),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-08-08 
這篇文章主要介紹了js中數(shù)組常用方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04 
js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單工具欄出現(xiàn)折疊與展開(kāi)效果,涉及javascript鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下
2015-05-05