canvas實(shí)現(xiàn)給圖片與文本加水印
先弄出一個(gè)canvas
<!DOCTYPE html>
<html>
<head>
<title>Canvas API 示例</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
您的瀏覽器不支持Canvas。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.arc(100, 100, 70, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>在開(kāi)始創(chuàng)建文本水印之前，我們需要先搭建Canvas環(huán)境并獲取其上下文（context）。Canvas API提供了2D渲染上下文，我們可以通過(guò)它來(lái)繪制文本、圖形等元素。以下是如何設(shè)置Canvas環(huán)境和獲取上下文的步驟：
// 獲取Canvas元素
const canvas = document.getElementById('myCanvas');
// 獲取Canvas的2D渲染上下文
const ctx = canvas.getContext('2d');
// 設(shè)置Canvas尺寸
canvas.width = window.innerWidth; // 適應(yīng)窗口寬度
canvas.height = window.innerHeight; // 適應(yīng)窗口高度
接下來(lái)，我們將進(jìn)行文本水印的參數(shù)配置和渲染流程。文本水印涉及到的參數(shù)主要包括文本內(nèi)容、字體樣式、字體大小、顏色以及文本的位置等。
// 設(shè)置文本水印參數(shù) const text = "水印文本"; // 文本內(nèi)容 const font = "20px Arial"; // 字體樣式和大小 const color = "rgba(0, 0, 255, 0.5)"; // 顏色（帶透明度） const textX = 10; // 文本的X坐標(biāo) const textY = 30; // 文本的Y坐標(biāo) // 渲染文本水印 ctx.font = font; // 設(shè)置字體 ctx.fillStyle = color; // 設(shè)置填充顏色 ctx.fillText(text, textX, textY); // 繪制文本
設(shè)計(jì)文本水印時(shí)，字體、大小和顏色是三個(gè)至關(guān)重要的參數(shù)。通過(guò)調(diào)整這些參數(shù)，我們能夠控制文本水印的外觀和可讀性，以便更好地符合設(shè)計(jì)需求。
// 設(shè)置不同的字體、大小和顏色
const fonts = ['Arial', 'Times New Roman', 'Consolas', 'Courier New'];
const sizes = ['16px', '20px', '24px', '28px'];
const colors = [
'rgba(0, 0, 0, 0.5)',
'rgba(255, 0, 0, 0.5)',
'rgba(0, 255, 0, 0.5)',
'rgba(0, 0, 255, 0.5)'
];
// 隨機(jī)選擇字體樣式、大小和顏色
let randomFont = fonts[Math.floor(Math.random() * fonts.length)];
let randomSize = sizes[Math.floor(Math.random() * sizes.length)];
let randomColor = colors[Math.floor(Math.random() * colors.length)];
// 渲染文本水印
ctx.font = `${randomSize} ${randomFont}`; // 設(shè)置隨機(jī)字體和大小
ctx.fillStyle = randomColor; // 設(shè)置隨機(jī)顏色
ctx.fillText(text, textX, textY);除了字體、大小和顏色，文本布局和對(duì)齊方式也是設(shè)計(jì)文本水印時(shí)需要考慮的因素。它們直接影響到文本的展示效果和閱讀體驗(yàn)。
// 設(shè)置文本的對(duì)齊方式 ctx.textAlign = 'center'; // 水平居中對(duì)齊 ctx.textBaseline = 'middle'; // 垂直居中對(duì)齊 // 渲染文本水印 ctx.fillText(text, canvas.width / 2, canvas.height / 2); // 在Canvas中心位置繪制文本
在某些情況下，我們可能需要處理文本內(nèi)容過(guò)長(zhǎng)導(dǎo)致的換行和溢出問(wèn)題。通過(guò)調(diào)整Canvas的文本繪制方法，我們可以實(shí)現(xiàn)文本的自動(dòng)換行，并通過(guò)設(shè)置裁剪區(qū)域來(lái)處理溢出。
// 設(shè)置文本換行 ctx.textAlign = 'start'; // 文本左對(duì)齊 ctx.textBaseline = 'top'; // 文本頂部對(duì)齊 ctx.direction = 'rtl'; // 文本方向從右到左 // 設(shè)置裁剪區(qū)域，防止文本溢出Canvas邊界 ctx.canvas.width = 300; // 設(shè)置Canvas寬度 ctx.canvas.height = 200; // 設(shè)置Canvas高度 ctx.clip(); // 應(yīng)用裁剪區(qū)域 // 渲染文本水印 const longText = "這是一段很長(zhǎng)很長(zhǎng)的文本，可能會(huì)導(dǎo)致?lián)Q行，我們需要正確處理這種情況，確保文本能夠在Canvas中正確顯示。"; ctx.fillText(longText, 10, 10);
由于圖片資源通常較大，若在頁(yè)面加載時(shí)同步加載所有圖片，將導(dǎo)致頁(yè)面渲染時(shí)間過(guò)長(zhǎng)，用戶體驗(yàn)差。因此，采用異步加載是解決這一問(wèn)題的有效方法。使用 Image 對(duì)象的 onload 事件可以監(jiān)控圖片加載狀態(tài)。
var img = new Image();
img.onload = function() {
console.log('圖片加載完成');
// 繪制圖片水印的代碼可以在這里執(zhí)行
};
img.onerror = function() {
console.log('圖片加載失敗');
};
img.src = 'path/to/your/image.png'; // 異步加載圖片
在復(fù)雜的Web應(yīng)用中，合理管理圖片資源的緩存策略是提高性能的關(guān)鍵。合理使用瀏覽器緩存可以減少服務(wù)器請(qǐng)求次數(shù)，加快頁(yè)面加載速度。設(shè)置合理的HTTP緩存頭（例如 Cache-Control ）是一個(gè)有效的方法。
function preloadImages(imagesArray) {
var loadedImages = [];
var imagesToLoad = imagesArray.length;
imagesArray.forEach(function(imageUrl) {
var img = new Image();
img.onload = function() {
loadedImages.push(img);
imagesToLoad--;
if (imagesToLoad === 0) {
// 所有圖片加載完成
console.log('所有圖片加載完畢');
}
};
img.onerror = function() {
console.log('圖片加載錯(cuò)誤');
};
img.src = imageUrl;
});
}在Canvas中繪制圖片水印首先需要確定圖片的坐標(biāo)位置和尺寸。通常，我們希望水印覆蓋整個(gè)畫布，或者在特定位置顯示。下面是一個(gè)設(shè)置圖片水印坐標(biāo)的示例代碼：
function drawImageWatermark(ctx, img, x, y, width, height) {
// 保持圖片縱橫比
var imgRatio = img.width / img.height;
var canvasRatio = ctx.canvas.width / ctx.canvas.height;
if (canvasRatio < imgRatio) {
width = ctx.canvas.width; // 寬度設(shè)置為畫布寬度
height = width / imgRatio; // 高度按比例縮放
} else {
height = ctx.canvas.height; // 高度設(shè)置為畫布高度
width = height * imgRatio; // 寬度按比例縮放
}
// 繪制圖片
ctx.drawImage(img, x, y, width, height);
}圖片水印通常需要一定透明度以避免完全覆蓋底下的內(nèi)容。另外，不同的Canvas合成模式可以幫助我們創(chuàng)建獨(dú)特的視覺(jué)效果。下面是如何設(shè)置圖片水印透明度和使用合成模式的代碼示例：
function applyWatermark(ctx, img) {
// 設(shè)置透明度
ctx.globalAlpha = 0.5;
// 設(shè)置混合模式，這里用的是destination-atop，確保水印在內(nèi)容之上但不是完全覆蓋
ctx.globalCompositeOperation = 'destination-atop';
// 繪制圖片水印
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
// 清除設(shè)置，不影響后續(xù)繪制
ctx.globalAlpha = 1;
ctx.globalCompositeOperation = 'source-over';
}
以上就是canvas實(shí)現(xiàn)給圖片與文本加水印的詳細(xì)內(nèi)容，更多關(guān)于canvas圖片文本加水印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
在經(jīng)歷了漫長(zhǎng)的時(shí)期，終于下定了決心自己寫一個(gè)層的拖動(dòng)。當(dāng)然了，其它的拖動(dòng)也是這樣的思路和做法，或者說(shuō)，這樣的拖動(dòng)適合所有的可見(jiàn)元素2012-05-05
JS短信驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)（沒(méi)有驗(yàn)證碼，只有倒計(jì)時(shí)）
最近接了個(gè)項(xiàng)目，其中有這樣的需求：當(dāng)用戶想要獲取驗(yàn)證碼時(shí)，就點(diǎn)擊免費(fèi)獲取驗(yàn)證碼 ，然后開(kāi)始倒計(jì)時(shí)，倒計(jì)時(shí)期間按鈕文字為剩余時(shí)間x秒，且不可按狀態(tài)，倒計(jì)時(shí)結(jié)束后，按鈕更改為點(diǎn)擊重新發(fā)送，下面給大家分享js短信驗(yàn)證碼倒計(jì)時(shí)實(shí)現(xiàn)代碼2016-10-10
JavaScript安全加密之禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼2009-12-12
js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題
JavaScript 實(shí)現(xiàn)網(wǎng)頁(yè)打印處理