图片去水印js_图片去水印教程

图片去水印在 JavaScript 中可以通过前端技术实现，但效果受水印复杂度和位置影响较大。以下是几种常见方法及示例：

一、基础方法（简单水印）

1. CSS 滤镜（适用于半透明水印）

html

<img src="watermarked.jpg"

style="filter: blur(5px) grayscale(0.5) saturate(0.8);">

2. Canvas 像素操作（精确去除固定位置水印）

```javascript

function removeWatermark(img) {

const canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

const ctx = canvas.getContext('2d');

// 绘制原图

ctx.drawImage(img, 0, 0);

// 假设水印在右下角 100x100 区域

const data = ctx.getImageData(0, 0, img.width, img.height);

for (let y = img.height 100; y < img.height; y++) {

for (let x = img.width 100; x < img.width; x++) {

const index = (y img.width + x) 4;

// 将水印区域透明度降低（示例：设为50%透明）

data.data[index + 3] = data.data[index + 3] 0.5;