JS利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成
介紹
給圖片添加水印可以幫助網(wǎng)站或作者保護(hù)自己的版權(quán)，或防止內(nèi)容被別人利用。給圖片添加水印分為添加文字水印和添加圖片水印，水印一般都做成半透明的，這樣不至于影響原圖內(nèi)容的瀏覽。Canvas 圖片水印合成與 Canvas 實(shí)現(xiàn)圖片壓縮 原理基本相同：
- CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以從頁面 DOM 元素作為圖像源來根據(jù)坐標(biāo)和大小重新繪制該圖像。
- HTMLCanvasElement.toDataURL() 方法支持導(dǎo)出為 base64 字符串。
文字水印
首先創(chuàng)建一個(gè)空的 canvas 元素，并獲取其上下文。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
獲取頁面上需要合成水印的 img 元素，或者根據(jù)一個(gè) File 或 Blob 對(duì)象，創(chuàng)建一個(gè)空的 img 元素，將其 src 設(shè)為 File 或 Blob 對(duì)象的 URL。
設(shè)置 canvas 元素的寬高為 img 元素的寬高，清除畫布，繪制圖像。
canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
設(shè)置字體、對(duì)齊方式、旋轉(zhuǎn)角度。
ctx.font = `bold ${img.height / 10}px arial`;
ctx.fillStyle = 'rgba(255, 0, 0, .2)';
ctx.textBaseline = 'bottom';
ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2);
定義水印文字、水印高度，循環(huán)繪制水印。
let txt = '1234567 ';
const txtHeight = img.height / 6;
txt = Array(Math.ceil(canvas.width / ctx.measureText(txt).width) * 2).join(txt);
for (let i = 0; i < Math.ceil(canvas.height / txtHeight) * 2; i++) {
ctx.fillText(txt, 0, i * txtHeight);
}
在頁面渲染合成后的圖像，釋放創(chuàng)建的 URL 對(duì)象。
result.src = canvas.toDataURL(type); URL.revokeObjectURL(img.src);
效果
圖片水印
首先創(chuàng)建一個(gè)空的 canvas 元素，并獲取其上下文。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
獲取頁面上需要合成水印的 img 元素，或者根據(jù)一個(gè) File 或 Blob 對(duì)象，創(chuàng)建一個(gè)空的 img 元素，將其 src 設(shè)為 File 或 Blob 對(duì)象的 URL。
設(shè)置 canvas 元素的寬高為 img 元素的寬高，清除畫布，繪制圖像。
canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
設(shè)置旋轉(zhuǎn)角度，創(chuàng)建重復(fù)圖像的模式，繪制水印。
ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = ctx.createPattern(imgCover, 'repeat'); ctx.fill();
在頁面渲染合成后的圖像，釋放創(chuàng)建的 URL 對(duì)象。
result.src = canvas.toDataURL(type); URL.revokeObjectURL(img.src);
效果
到此這篇關(guān)于JS利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成的文章就介紹到這了,更多相關(guān)JS Canvas水印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于利用JS十分鐘判斷數(shù)組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)
數(shù)組扁平化也是面試?？碱}之一,今天就和大家簡(jiǎn)單分享一下常見的數(shù)組扁平方法,這題其實(shí)主要考察的是遞歸思想,因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時(shí)候只能通過循環(huán)遞歸來進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了JS百度地圖搜索懸浮窗功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了淺談Javascript數(shù)組的使用的相關(guān)資料,包括數(shù)組的大小，數(shù)組的遍歷以及數(shù)組的一些方法，非常細(xì)致，需要的朋友可以參考下2015-07-07
javascript的除法結(jié)果會(huì)有誤差，在兩個(gè)浮點(diǎn)數(shù)相除的時(shí)候會(huì)比較明顯。這個(gè)函數(shù)返回較為精確的除法結(jié)果2012-07-07
Javascript的構(gòu)造函數(shù)和constructor屬性
我們知道，默認(rèn)情況下，對(duì)一個(gè)函數(shù)前面使用new，可以構(gòu)造出一個(gè)對(duì)象。每一個(gè)對(duì)象都有一個(gè)constructor屬性，這個(gè)constructor屬性指向構(gòu)造出該對(duì)象的函數(shù)。2010-01-01
這篇文章主要介紹了ES6生成器用法,結(jié)合實(shí)例形式分析了ECMAScript6中生成器的概念、語法、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。2011-09-09
JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹了bootstrap日期控件（雙日期、清空等問題解決）相關(guān)知識(shí),需要的朋友可以參考下2017-04-04