亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML5+Canvas實現(xiàn)圖片添加水印功能

 更新時間：2024年11月06日 08:28:07   作者：_XU  
在現(xiàn)代Web開發(fā)中,圖像處理是一個常見的需求,尤其是為圖片添加水印,下面我們就來看看如何使用HTML5的Canvas技術為圖片添加水印,需要的可以了解下

在現(xiàn)代Web開發(fā)中，圖像處理是一個常見的需求，尤其是為圖片添加水印。水印常用于標記圖像的版權、出處或時間信息等。本文將詳細介紹如何使用HTML5的Canvas技術為圖片添加水印，講解代碼實現(xiàn)的每一個細節(jié)，幫助大家理解整個過程，并且能夠靈活運用。

一、HTML5 Canvas概述

Canvas是HTML5新增的一個元素，它提供了一個用于動態(tài)生成圖像的畫布環(huán)境。通過JavaScript，我們可以在Canvas上繪制圖形、文本或圖像。Canvas非常適合處理圖像編輯、圖形繪制、動畫等任務。

Canvas的基本用法：

  • 創(chuàng)建Canvas元素：通過HTML中定義<canvas>標簽。
  • 獲取Canvas上下文：Canvas的繪圖操作都是基于其上下文進行的。通過getContext('2d')可以獲取一個2D繪圖上下文對象，進而執(zhí)行各種繪圖操作。
  • 繪制操作：包括繪制圖像、矩形、圓形、路徑等。

二、實現(xiàn)代碼分析

接下來，我們對代碼進行詳細的分析，逐步理解每一部分的功能和實現(xiàn)方式。

function addMark(base64, text, currentTime) {
  var img = new Image();
  img.src = base64;
  img.onload = function() {
    // 準備canvas環(huán)境
    var canvas = document.getElementById("myCanvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    
    // 繪制圖片
    ctx.drawImage(img, 0, 0);

    // 識別左上角顏色
    const imageData = ctx.getImageData(0, 0, 200, 100);
    const leftData = imageData.data;
    let r = 0, g = 0, b = 0, count = 0;
    for (let i = 0; i < leftData.length; i += 4) {
      r += leftData[i];
      g += leftData[i + 1];
      b += leftData[i + 2];
      count++;
    }
    r = Math.floor(r / count);
    g = Math.floor(g / count);
    b = Math.floor(b / count);

    const brightness = r * 0.299 + g * 0.587 + b * 0.144;
    const textColor = brightness > 128 ? "rgba(0, 0, 0,1)" : "rgba(255, 255, 255,1)";
    
    // 繪制水印
    ctx.font = "35px SimHei";
    ctx.fillStyle = textColor;
    ctx.fillText(text, 10, 50);
    ctx.fillText(currentTime, 10, 100);

    let result = canvas.toDataURL("image/jpeg", 0.5);
    return result; // 返回帶水印的Base64圖像
  };

  img.onerror = function() {
    alert("添加水印出錯了~");
  };
};

1. 加載圖像

var img = new Image();
img.src = base64;

首先，我們創(chuàng)建一個Image對象，并通過base64格式的圖像數(shù)據加載圖片。base64是將二進制數(shù)據編碼成ASCII字符的一種方式，常用于圖像數(shù)據傳輸和嵌入。

2. 創(chuàng)建Canvas并設置大小

var canvas = document.getElementById("myCanvas");
canvas.width = img.width;
canvas.height = img.height;

通過document.getElementById獲取一個HTML中的Canvas元素。隨后，我們將Canvas的寬高設置為圖片的寬高，以確保圖像能夠完整地繪制在Canvas中。

3. 繪制圖片到Canvas

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

接下來，使用Canvas的drawImage方法將加載的圖片繪制到Canvas上。ctx.getContext('2d')方法用于獲取Canvas的繪圖上下文（2D），然后通過ctx.drawImage將圖像繪制到畫布的指定位置。

4. 計算圖片左上角顏色亮度

const imageData = ctx.getImageData(0, 0, 200, 100);
const leftData = imageData.data;
let r = 0, g = 0, b = 0, count = 0;
for (let i = 0; i < leftData.length; i += 4) {
  r += leftData[i];
  g += leftData[i + 1];
  b += leftData[i + 2];
  count++;
}

為了動態(tài)選擇水印的顏色，我們通過getImageData方法獲取Canvas上的一個區(qū)域像素數(shù)據。在此代碼中，我們選擇了Canvas左上角的200x100像素區(qū)域，并計算這些像素的RGB值的平均值，以估算圖像的亮度。

5. 計算亮度并決定水印顏色

const brightness = r * 0.299 + g * 0.587 + b * 0.144;
const textColor = brightness > 128 ? "rgba(0, 0, 0,1)" : "rgba(255, 255, 255,1)";

通過公式計算出圖像的亮度值。為了簡單地判斷背景色是亮色還是暗色，我們使用了加權平均亮度公式。若亮度大于128，則選擇黑色字體；否則，選擇白色字體。

6. 繪制水印文字

ctx.font = "35px SimHei";
ctx.fillStyle = textColor;
ctx.fillText(text, 10, 50);
ctx.fillText(currentTime, 10, 100);

此處我們設置了水印文字的字體和大?。?5px，使用SimHei字體）。然后，使用fillText方法分別繪制水印的姓名和當前時間，指定了文字的起始坐標。

7. 輸出帶水印的圖像

let result = canvas.toDataURL("image/jpeg", 0.5);
return result;

最后，通過toDataURL方法將Canvas的內容轉化為Base64編碼的JPEG圖片，并設置質量為0.5，返回帶有水印的圖像數(shù)據。

三、總結

通過HTML5的Canvas API，我們能夠靈活地為圖片添加水印，本文展示的代碼為基礎的水印添加方案，大家可以根據實際需求進一步擴展功能，如支持動態(tài)字體、透明度控制、多個水印等。

到此這篇關于HTML5+Canvas實現(xiàn)圖片添加水印功能的文章就介紹到這了,更多相關HTML5 Canvas圖片添加水印內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論