欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

一、HTML5 Canvas概述

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

Canvas的基本用法：

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

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

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

function addMark(base64, text, currentTime) {
  var img = new Image();
  img.src = base64;
  img.onload = function() {
    // 準(zhǔn)備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);

    // 識(shí)別左上角顏色
    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("添加水印出錯(cuò)了~");
  };
};

1. 加載圖像

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

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

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

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

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

3. 繪制圖片到Canvas

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

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

4. 計(jì)算圖片左上角顏色亮度

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++;
}

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

5. 計(jì)算亮度并決定水印顏色

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)";

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

6. 繪制水印文字

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

此處我們?cè)O(shè)置了水印文字的字體和大?。?5px，使用SimHei字體）。然后，使用fillText方法分別繪制水印的姓名和當(dāng)前時(shí)間，指定了文字的起始坐標(biāo)。

7. 輸出帶水印的圖像

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

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

三、總結(jié)

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

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

相關(guān)文章

最新評(píng)論