在 HTML5 中，我們可以使用<canvas>標簽來操作圖片，并且可以利用這個標簽來設置圖片過濾。

首先，在 HTML 中添加如下代碼來添加一個<canvas>標簽：

<canvas id="myCanvas" width="300" height="300"></canvas>

然后，我們可以用 JavaScript 來獲取這個<canvas>標簽，如下所示：

var canvas = document.getElementById("myCanvas");

接下來，我們可以使用getContext()方法來獲取繪圖上下文。我們可以利用這個上下文來設置要繪制的圖像的過濾。

var ctx = canvas.getContext("2d");

下面是一些可用的過濾器：

• grayscale(100%)：將圖像轉換為灰度圖像。
• sepia(100%)：將圖像轉換為深棕色色調。
• invert(100%)：將圖像的顏色反轉。
• saturate(100%)：對圖像的飽和度進行調整。
• hue-rotate(90deg)：對圖像的色相進行旋轉。
• brightness(150%)：對圖像的亮度進行調整。
• contrast(200%)：對圖像的對比度進行調整。

我們可以使用filter屬性來設置過濾器，如下所示：

ctx.filter = "brightness(150%)";

最后，我們可以使用drawImage()方法將圖像繪制到<canvas>標簽中，如下所示：

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
};

現在，當該圖片被繪制到<canvas>標簽中時，將會應用所設置的過濾器。