canvas實(shí)現(xiàn)給圖片與文本加水印

更新時(shí)間：2024年12月16日 11:06:29 作者：irisMoon06

這篇文章主要為大家詳細(xì)介紹了如何使用canvas實(shí)現(xiàn)給圖片與文本加水印功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下

先弄出一個(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>

在開始創(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)文章！

您可能感興趣的文章: