JavaScript に基づいて画像フィルター効果を開発する

// 获取Canvas元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 加载图片
const image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 将图片绘制到Canvas上
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  // 获取图片像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 遍历每个像素，将RGB值转换为灰度值
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const gray = (r + g + b) / 3;
    data[i] = gray;
    data[i + 1] = gray;
    data[i + 2] = gray;
  }

  // 将修改后的像素数据重新绘制到Canvas上
  ctx.putImageData(imageData, 0, 0);
};

// 获取Canvas元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 加载图片
const image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 创建临时的Canvas对象
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  const tempCtx = tempCanvas.getContext('2d');

  // 将图片绘制到临时Canvas上
  tempCtx.drawImage(image, 0, 0, tempCanvas.width, tempCanvas.height);

  // 获取临时Canvas的像素数据
  const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
  const data = imageData.data;

  // 遍历每个像素，将RGB值模糊处理
  for (let i = 0; i < data.length; i += 4) {
    const random = Math.random() * 0.1; // 模糊程度，可根据需求调整
    data[i] += random;
    data[i + 1] += random;
    data[i + 2] += random;
  }

  // 将修改后的像素数据重新绘制到Canvas上
  ctx.putImageData(imageData, 0, 0);
};

// 获取Canvas元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 加载图片
const image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 将图片绘制到Canvas上
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  // 获取图片像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 遍历每个像素，调整对比度
  const contrast = 1.5; // 对比度值，可根据需求调整
  for (let i = 0; i < data.length; i += 4) {
    data[i] = (data[i] - 128) * contrast + 128;
    data[i + 1] = (data[i + 1] - 128) * contrast + 128;
    data[i + 2] = (data[i + 2] - 128) * contrast + 128;
  }

  // 将修改后的像素数据重新绘制到Canvas上
  ctx.putImageData(imageData, 0, 0);
};