当前位置：首页 > JavaScript

js实现图片打乱

2026-03-15 16:52:20JavaScript

使用 Canvas 打乱图片

通过 Canvas 将图片分割为多个小块并随机排列，实现视觉上的打乱效果。以下是实现代码：

js实现图片打乱

function scrambleImage(image, rows = 10, cols = 10) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;

  const tileWidth = Math.floor(image.width / cols);
  const tileHeight = Math.floor(image.height / rows);
  const tiles = [];

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      tiles.push({
        x: x * tileWidth,
        y: y * tileHeight,
        width: tileWidth,
        height: tileHeight
      });
    }
  }

  const shuffledTiles = [...tiles].sort(() => Math.random() - 0.5);

  ctx.drawImage(image, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  shuffledTiles.forEach((tile, index) => {
    const sourceTile = tiles[index];
    const tileData = ctx.getImageData(
      sourceTile.x, sourceTile.y, sourceTile.width, sourceTile.height
    );
    ctx.putImageData(tileData, tile.x, tile.y);
  });

  return canvas;
}

使用 CSS 打乱图片

通过 CSS 将图片分割为网格并随机排列位置，适合不需要像素级操作的场景：

js实现图片打乱

function cssScramble(imageElement, rows = 10, cols = 10) {
  const container = document.createElement('div');
  container.style.position = 'relative';
  container.style.width = `${imageElement.width}px`;
  container.style.height = `${imageElement.height}px`;

  const tileWidth = imageElement.width / cols;
  const tileHeight = imageElement.height / rows;

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const tile = document.createElement('div');
      tile.style.position = 'absolute';
      tile.style.width = `${tileWidth}px`;
      tile.style.height = `${tileHeight}px`;
      tile.style.backgroundImage = `url(${imageElement.src})`;
      tile.style.backgroundPosition = `-${x * tileWidth}px -${y * tileHeight}px`;
      tile.style.backgroundSize = `${imageElement.width}px ${imageElement.height}px`;
      tile.style.left = `${Math.random() * imageElement.width}px`;
      tile.style.top = `${Math.random() * imageElement.height}px`;
      container.appendChild(tile);
    }
  }

  return container;
}

使用像素操作打乱

直接操作像素数据实现更精细的控制，适合需要完全随机化的场景：

function pixelScramble(image) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);

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

  for (let i = 0; i < data.length; i += 4) {
    const j = Math.floor(Math.random() * (data.length / 4)) * 4;
    [data[i], data[j]] = [data[j], data[i]];
    [data[i+1], data[j+1]] = [data[j+1], data[i+1]];
    [data[i+2], data[j+2]] = [data[j+2], data[i+2]];
    data[i+3] = data[j+3] = 255;
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas;
}